Tooltips are useful for conveying information when an user hovers over an element.
Wrap both the tooltip's trigger element (such as an
<i-button>) and the
<template slot="body"> inside a
Trigger tooltips at the
right of elements by adding the
placement property to the
Each of the positions also has a
-end variant (
bottom-end, etc.) that sets the tooltip to the start or end of the placement instead of centering it.
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.
You can use the
trigger property to trigger the tooltip on
click. By default, tooltips are triggered on
hover, a design decision made to improve user experience.
You're able to use the
size modifier to control the size of your tooltips, using one of the available sizes:
The default size is set to
Inkline includes two predefined tooltip styles, each serving its own semantic purpose. You can set the style of a
<i-tooltip> using the
variant property, which can have a value of
dark. By default, tooltips use the
Here you can find a list of the various customization options you can use for the tooltip components as props, as well as available slots and events.
Here you can find a list of the Sass variables you can use for the tooltip components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.