# Tooltips

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

Source: https://bootstrap-svelte.vercel.app/components/tooltip — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

---

## Basic Example

The simplest way to add a tooltip to an element.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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 |