@thebase/ui/docs/components/tooltip.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Tooltip

Use `b-ui="tooltip"` with either `b-att-content` or a tooltip content child.

## Pure Owl component

```js
import { Tooltip } from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="w-100 d-flex align-items-center justify-content-center">
  <Tooltip content="'Add to library'">
    <t t-set-slot="trigger">
      <Button variant="'outline'">Hover</Button>
    </t>
  </Tooltip>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Tooltip` | `content` | `String` | optional; plain content shortcut, passed directly as the bootstrap `title` |
| `Tooltip` | `state` | `String` | optional; `"open"`/`"on"`/`"active"` shows the tooltip once on mount (uncontrolled testing hook) |
| `Tooltip` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

Both the pure Owl and static forms are driven by a live `bootstrap.Tooltip` instance owned on the trigger element, with `trigger: "hover focus"` — **the visible popup is Bootstrap's own generated DOM (a `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the tooltip.** Don't query for it as a descendant of the trigger; query `document.body.querySelector(".tooltip .tooltip-inner")` instead. Bootstrap sets `aria-describedby` on the trigger itself, but only while the tooltip is actually shown (removed again on hide) — BaseUI does not additionally set a static `aria-describedby` up front.

The default slot's rendered markup is captured into an HTML string for Bootstrap's `title`/`html: true` options (Bootstrap can't consume live vnodes): the pure Owl component renders the slot into a hidden buffer element internal to its own template, reads its `innerHTML` on mount, and re-syncs the live popup via `.setContent({'.tooltip-inner': html})` whenever that HTML changes on a later render.

## Static component

```base-ui
<span b-ui="tooltip" b-att-content="Helpful tip">
  <button type="button">?</button>
</span>
```

Tooltips show on hover and focus, then hide on mouse leave and blur — Bootstrap's own `trigger: "hover focus"` wires this, not manual event listeners. The static adapter reads `[b-tooltip-content]` (or the element built from `b-att-content`) once at mount time as the tooltip's HTML content, then removes that node from the DOM — Bootstrap owns showing/hiding the content from then on, so no `[b-tooltip-content]` element survives in the authored markup post-mount.

## Enhanced usage

Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.

## Options and attributes

See `dist/baseui.registry.json` for the supported attribute list.

## Methods

Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.

## Events

Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.tooltip`/`hidden.bs.tooltip` on the trigger element to react to show/hide; BaseUI mirrors those into `b-att-state` (`open`/`closed`) on the static root and `this.state.open` on the pure Owl component.

## CSS variables

The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.

## Accessibility behavior

The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.

## Examples

See `examples/index.html` for a working CDN-style page.

## Browser support

BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.

## Test checklist

Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.