Tooltip

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

Example

Wrap both the tooltip's trigger element (such as an <i-button>) and the <template slot="body"> inside a <i-tooltip> component.

Tooltip Example

Placement

Trigger tooltips at the top, bottom, left or right of elements by adding the placement property to the <i-tooltip> element.

Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the tooltip to the start or end of the placement instead of centering it.

Tooltip Placement
 
 
 

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.

Freeform Tooltip
 

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.

Tooltip Trigger Type
 
 
 
 
 

Sizes

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

Tooltip Sizes
 
 

Variants

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 light or dark. By default, tooltips use the dark variant.

Tooltip Variants
 

API

Tooltip API <i-tooltip>
Property Description Type Accepted Default
arrow Sets whether to attach an arrow to the tooltip. Boolean true, false true
disabled Sets the tooltip state as disabled. Boolean true, false false
id Sets the identifier of the tooltip. String tooltip-<uid>
placement Sets the placement of the tooltip. String top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end top
popperOptions Sets custom options for the Popper.js plugin. Object
trigger Sets the trigger event of the tooltip. String click, hover hover
transformOrigin Sets the transform origin of the tooltip. Boolean, String true
variant Sets the color variant of the popover. String light, dark light