Pick a component

Tooltip

Used to provide extra information, often about why a button is disabled, on hover or tap over the target element.

<Tooltip
  id="example-button"
  text={"This button is disabled because of a long and complicated explanation
  that doesn't fit in the margin of this webpage."}
>
  <button class="secondary" disabled>Disabled</button>
</Tooltip>

Properties

Property Description Type Default
id Used to link the target to the tooltip via aria-describedby string
testId Add a data-tid attribute to the DOM, useful for test purpose. string "tooltip-component"
text The text displayed in the tooltip. string ""
noWrap Whether to prevent the tooltip text from taking mulitple lines. boolean false
top Whether to prevent the tooltip text from taking mulitple lines. boolean false
center Whether to ignore overflow logic an just center align instead. boolean false

Slots

Slot name Description
Default slot The target of the tooltip.

Showcase

The tooltips will appear when the buttons are hovered or tapped.

Tooltip text: