t1-tooltip — T1 Component Library

Basic

Wrap any element with t1-tooltip and set the content attribute to show a tooltip on hover or focus.

Hover Me

Use the placement attribute to set the preferred position of the tooltip.

top-start

top

top-end

bottom-start

bottom

bottom-end

left

left-start

left-end

right

right-start

right-end

Set trigger="click" to toggle the tooltip on click instead of hover.

Click to Toggle

Set trigger="manual" and control the open property programmatically.

Toggle Manually

Add the disabled attribute to prevent the tooltip from appearing.

No Tooltip Here

Use the --max-width custom property to control how wide the tooltip can grow before wrapping.

Narrow Tooltip

Wide Tooltip

Use the distance attribute to set the gap between the tooltip and the target element.

Close (2px)

Default (8px)

Far (20px)