Twikit

Get Started Components Avatar Badge Button Carousel Checkbox Color Picker Item Context Menu Context Menu Item Icon Image Picker Item Input Input Unscoped Modal Nav Nav Group Nav Item Picker Progress Radio Radio Group Range Select Sortable Sortable Item Spinner Step Steps Tab Tab Group Textarea Toggle Tooltip CSS Framework Design Tokens Theming

Tooltip

A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.

<div class="tw-padding-xl">
  <tw-button aria-describedby="tooltip">Hover or focus me</tw-button>
  <tw-tooltip id="tooltip">Tooltip</tw-tooltip>
</div>

Properties

Property Attribute Description Type Default
id id The id elements can reference using aria-describedby. string ""
placement placement The placement of the tooltip in relation to the anchor. Placement "top"
delay delay The delay in ms before the tooltip appears. number 500

Slots

Name Description
Default The content of the tooltip.

CSS Properties

Property Description Default
--tw-tooltip-background-color The background color of the tooltip. rgba(0, 0, 0, 0.8)
--tw-tooltip-color The text color of the tooltip. var(--tw-color-text-on-dark)