Tooltip
A popup that displays information related to an element on focus or hover.
Add to library
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/tooltip.tsx — shown on hover/focus by the island
export function Tooltip(o) {
return \`<span data-ui="tooltip" class="relative inline-flex">
<span data-ui="tooltip-trigger">\${o.trigger}</span>
<span data-ui="tooltip-content" hidden class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow whitespace-nowrap">\${o.content}</span>
</span>\`;
}Installation
$ bext ui add tooltipCopy and paste the following into src/components/ui/tooltip.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/tooltip.tsx — shown on hover/focus by the island
export function Tooltip(o) {
return \`<span data-ui="tooltip" class="relative inline-flex">
<span data-ui="tooltip-trigger">\${o.trigger}</span>
<span data-ui="tooltip-content" hidden class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow whitespace-nowrap">\${o.content}</span>
</span>\`;
}This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="tooltip" hooks.
On This Page