Flint UI

Tag: &lt;flint-tooltip&gt;
Class: FlintTooltip

Placements

flint-tooltip A component that displays a text label when users hover over or focus on an element.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintTooltip } from '@getufy/flint-ui';

html

<flint-tooltip></flint-tooltip>

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`''`	Text content displayed inside the tooltip.
`placement`	`placement`	`Placement`	`'top'`	Preferred placement of the tooltip relative to the trigger element.
`arrow`	`arrow`	`boolean`	`false`	Show a small arrow pointing toward the trigger element.
`disabled`	`disabled`	`boolean`	`false`	Disables the tooltip so it never appears.
`openDelay`	`open-delay`	`number`	`0`	Delay in ms before showing the tooltip.
`closeDelay`	`close-delay`	`number`	`0`	Delay in ms before hiding the tooltip.
`distance`	`distance`	`number`	`8`	Distance in pixels between the tooltip and the trigger element.
`hoist`	`hoist`	`boolean`	`false`	When true, the tooltip popup uses `position: fixed` instead of `position: absolute`

Event	Detail	Description
`flint-tooltip-show`	—	Dispatched when the tooltip becomes visible.
`flint-tooltip-hide`	—	Dispatched when the tooltip is dismissed.

Name	Description
`base`	The component's base wrapper element.
`body`	The body element.

Tooltip ​