Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using Svelte components.

Interactive Playground

Controls

Placement

Trigger

Is Shown

Use Fade Animation

Custom HTML Content

Track Events

Preview

Code

            
            <Button id="tooltip-target" colorVariant="primary">
    Tooltip Target
</Button>

<Tooltip.Root
    isShown={false}
    placement="top"
    trigger="hover focus"
    useFade={true}
    referenceElementId="tooltip-target">
    <Tooltip.Inner>
        Simple tooltip content
    </Tooltip.Inner>
</Tooltip.Root>

Usage Notes

Use the placement prop to control tooltip position
The trigger prop controls how the tooltip is activated
The referenceElementId must match the ID of the target element
For disabled elements, wrap them in a container element with tabindex="0"
Event handlers can be used to track tooltip state changes

Basic Example

The simplest way to add a tooltip to an element.

            
            <Button id="basic-tooltip-example" colorVariant="primary">Hover over me</Button>

<Tooltip.Root trigger="hover" referenceElementId="basic-tooltip-example">
    <Tooltip.Inner>This is a simple tooltip</Tooltip.Inner>
</Tooltip.Root>

Custom tooltips

Tooltips can be customized with different colors and styles.

            
            <Button id="custom-tooltip-example1" colorVariant="warning">Custom Tooltip using "style" attribute</Button>

<Tooltip.Root referenceElementId="custom-tooltip-example1" style="--bs-tooltip-bg: #712cf9; --bs-tooltip-color: #fff;">
    <Tooltip.Inner>
        <strong>Custom tooltip</strong> with <em>HTML content</em>
    </Tooltip.Inner>
</Tooltip.Root>

<Button id="custom-tooltip-example2" colorVariant="danger">Custom Tooltip using "class" attribute</Button>

<Tooltip.Root referenceElementId="custom-tooltip-example2" class="custom-tooltip-colors">
    <Tooltip.Inner>
        <strong>Custom tooltip</strong> with <em>HTML content</em>
    </Tooltip.Inner>
</Tooltip.Root>

<style global>
    :global(.custom-tooltip-colors) {
        --bs-tooltip-bg: #db178c;
        --bs-tooltip-color: #fff;
    }
</style>

Placement Options

Tooltips can be positioned in four different directions: top, right, bottom, and left.

            
            <Button id="tooltip-top" colorVariant="secondary" class="me-2">Tooltip on top</Button>
<Tooltip.Root placement="top" referenceElementId="tooltip-top">
    <Tooltip.Inner>Tooltip on top</Tooltip.Inner>
</Tooltip.Root>

<Button id="tooltip-right" colorVariant="secondary" class="me-2">Tooltip on right</Button>
<Tooltip.Root placement="right" referenceElementId="tooltip-right">
    <Tooltip.Inner>Tooltip on right</Tooltip.Inner>
</Tooltip.Root>

<Button id="tooltip-bottom" colorVariant="secondary" class="me-2">Tooltip on bottom</Button>
<Tooltip.Root placement="bottom" referenceElementId="tooltip-bottom">
    <Tooltip.Inner>Tooltip on bottom</Tooltip.Inner>
</Tooltip.Root>

<Button id="tooltip-left" colorVariant="secondary">Tooltip on left</Button>
<Tooltip.Root placement="left" referenceElementId="tooltip-left">
    <Tooltip.Inner>Tooltip on left</Tooltip.Inner>
</Tooltip.Root>

Triggers

Tooltips can be triggered by various events like hover, click, or focus.

Click: Tooltip appears on click
Focus: Tooltip appears on focus
Hover: Tooltip appears on mouse enter
Manual: Tooltip is shown/hidden programmatically using the isShown property. Use playground above to see it in action.

            
            <Button id="click-tooltip-example" colorVariant="info">Click me</Button>
<Tooltip.Root trigger="click" referenceElementId="click-tooltip-example">
    <Tooltip.Inner>Click-triggered tooltip</Tooltip.Inner>
</Tooltip.Root>

<Button id="focus-tooltip-example" colorVariant="info">Focus me</Button>
<Tooltip.Root trigger="focus" referenceElementId="focus-tooltip-example">
    <Tooltip.Inner>Focus-triggered tooltip</Tooltip.Inner>
</Tooltip.Root>

<Button id="hover-tooltip-example" colorVariant="info">Hover me</Button>
<Tooltip.Root trigger="hover" referenceElementId="hover-tooltip-example">
    <Tooltip.Inner>Hover-triggered tooltip</Tooltip.Inner>
</Tooltip.Root>

<Button id="focus-hover-tooltip-example" colorVariant="info">Focus &amp; Hover trigger</Button>
<Tooltip.Root trigger="focus hover" referenceElementId="focus-hover-tooltip-example">
    <Tooltip.Inner>Focus &amp; Hover-triggered tooltip</Tooltip.Inner>
</Tooltip.Root>

HTML Content

Tooltips can contain HTML content for rich formatting.

            
            <Button id="html-tooltip-example" colorVariant="warning">HTML Content</Button>

<Tooltip.Root referenceElementId="html-tooltip-example">
    <Tooltip.Inner>
        <strong>Bold text</strong> and <em>italic text</em>
    </Tooltip.Inner>
</Tooltip.Root>

No Fade Effect

Tooltips can appear without the fade transition effect.

            
            <Button id="no-fade-example" colorVariant="danger">No Fade Effect</Button>

<Tooltip.Root useFade={false} referenceElementId="no-fade-example">
    <Tooltip.Inner>This tooltip appears without fade transition</Tooltip.Inner>
</Tooltip.Root>

Tooltips on Disabled Elements

To add tooltips to disabled elements, wrap them in a container element.

            
            <span class="d-inline-block" tabindex="0" id="disabled-wrapper-example">
    <Button disabled colorVariant="primary">Disabled button</Button>
</span>

<Tooltip.Root referenceElementId="disabled-wrapper-example">
    <Tooltip.Inner>Tooltip for disabled button</Tooltip.Inner>
</Tooltip.Root>

Accessibility

Do not rely on hover-only tooltips for essential information. Hover does not work for keyboard-only users, many touch interfaces, or users who need more time to read content.

Pair hover triggers with focus behavior, or provide the same information in visible page text.
Make the trigger element keyboard focusable and ensure the tooltip appears when the trigger receives focus.
For touch interfaces, prefer click or manual control so users can intentionally open and dismiss the tooltip.
Keep tooltip content short and non-interactive. Use a popover or dialog when the content needs links, buttons, or form controls.
Persistent or manually opened tooltip-like UI should have an obvious dismissal path, including keyboard dismissal.

API Reference

Tooltip.Root Props

Name	Type	Default	Description
`container`	`string \| HTMLElement \| false`	`false`	Appends the tooltip to a specific element. Useful for positioning tooltips in the flow of the document.
`isShown`	`boolean`	`false`	Controls whether the tooltip is visible.
`placement`	`string`	`'top'`	Position of the tooltip relative to its target: `'top'`, `'bottom'`, `'left'`, `'right'`.
`referenceElementId`	`string`	`undefined`	ID of the element that the tooltip is attached to.
`trigger`	`string`	`'hover focus'`	How tooltip is triggered: `'click'`, `'hover'`, `'focus'`, `'manual'`, or a space-separated combination.
`useFade`	`boolean`	`true`	Whether to apply a fade transition effect to the tooltip.
`onShow`	`Function`	`noop`	Function called when the tooltip is shown.
`onShown`	`Function`	`noop`	Function called after the tooltip is fully shown.
`onHide`	`Function`	`noop`	Function called when the tooltip begins to hide.
`onHidden`	`Function`	`noop`	Function called after the tooltip is fully hidden.

Tooltip.Inner Props

Name	Type	Default	Description
All `div` element props	Various	-	The Inner component accepts all standard HTML div element attributes

CSS Classes

Class	Description
`.tooltip`	Main container class for the tooltip
`.tooltip-inner`	Styles the inner content area of the tooltip
`.tooltip-arrow`	Styles the arrow element that points to the reference element
`.bs-tooltip-top`	Applied when the tooltip is positioned above the target
`.bs-tooltip-end`	Applied when the tooltip is positioned to the right of the target
`.bs-tooltip-bottom`	Applied when the tooltip is positioned below the target
`.bs-tooltip-start`	Applied when the tooltip is positioned to the left of the target
`.fade`	Applied to enable the fade transition effect
`.show`	Applied when the tooltip is visible