Tooltip

Tooltips are useful for conveying information when an user hovers over an element.

Wrap the trigger element (such as an <IButton>) and provide a <template #body> inside an <ITooltip> component to create a tooltip.

Placement

Trigger tooltips at the top, bottom, left or right of elements by using the placement property.

Each position also has a -start or -end variant that sets the tooltip to the start or end of the placement instead of centering it. The possible placements are:

  • top
  • top-start
  • top-end
  • bottom
  • bottom-start
  • bottom-end
  • left
  • left-start
  • left-end
  • right
  • right-start
  • right-end

Freeform

Tooltips can contain text of virtually any size. You can control the wrapping and the maximum width of the tooltip by setting white-space: normal and a fixed width property on the tooltip content.

Trigger Type

You can use the trigger property to trigger the tooltip on hover or click. By default, tooltips are triggered on hover, a design decision made to improve user experience.

Color Variants

You can choose a light or dark color for your tooltip using the color modifier.

Size Variants

You're able to use the size property to control the size of your tooltips, using one of the available sizes: sm, md, and lg. The default size is set to md.

Props

Slots

Events

Design Tokens