Tooltip

Placements

Loading...

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

• Tag: <flint-tooltip>
• Class: FlintTooltip

Import

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

Usage

<flint-tooltip></flint-tooltip>

Properties

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.

Slots

Name	Description
(default)	Default slot for content

CSS Custom Properties

Property	Default
--flint-tooltip-bg	—
--flint-tooltip-color	—
--flint-tooltip-max-width	300px
--flint-border-radius-sm	—
--flint-font-family	—
--flint-shadow-sm	—

---