Tooltip

Tooltip displays short messages on an element. It is a text-tip controller and a UI wrapper built on top of Drop.

UI Primitive

Example

Click to expand

TypeScript
import { createTooltip } from 'vanilla-jui';

TypeScript
const tooltip = createTooltip(button, {  message: 'Changes are synced after saving',});

Option	Type	Default	Description
`message`	`string`	`''`	Tooltip text. It is trimmed and cannot be empty
`mode`	`'click' \| 'hover'`	`'hover'`	Trigger mode
`position`	Drop position	`'auto'`	Floating-layer position, same as Drop
`offset`	`number`	`8`	Distance from target
`theme`	`false \| 'reverse' \| 'primary' \| ...`	`false`	Theme color
`cache`	`boolean`	`false`	Passed to Drop content cache
`ttl`	`number`	`0`	Cache TTL passed to Drop, in milliseconds
`delay`	`number \| { show?: number, hide?: number }`	`100`	Show/hide delay in milliseconds
`hoverIntent`	`boolean`	`true`	Enables hover intent in hover mode
`name`	`string \| null`	`null`	Tooltip name, passed to Drop and content node
`id`	`string \| null`	`null`	Floating-layer id, passed to Drop
`className`	`object`	See below	Overrides Tooltip content class names
`onShown`	`Function \| null`	`null`	Callback after Drop is shown
`onHidden`	`Function \| null`	`null`	Callback after Drop is hidden

Available theme values: reverse, primary, success, warning, error.

Property	Description
`element`	Underlying Drop root node; `null` after destroy
`drop`	Underlying Drop instance; `null` after destroy

Same as Drop instance methods.

Method	Description
`show(useDelay)`	Shows the tooltip
`hide(useDelay)`	Hides the tooltip
`toggle()`	Toggles display state
`destroy()`	Destroys Tooltip and the underlying Drop