mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
60 lines
2.8 KiB
Plaintext
60 lines
2.8 KiB
Plaintext
---
|
|
title: Tooltip
|
|
summary: A tooltip is a short text label that appears when the user hovers over or focuses an element. It explains a control that isn't clear on its own.
|
|
description: Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.
|
|
related: [/ui/components/popover]
|
|
source: core/scss/bootstrap/_tooltip.scss
|
|
classnames:
|
|
component:
|
|
- class: tooltip
|
|
desc: Container element, positioned by Bootstrap
|
|
part:
|
|
- class: tooltip-inner
|
|
desc: The bubble holding the text
|
|
- class: tooltip-arrow
|
|
desc: Pointer towards the trigger, positioned by Bootstrap
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Default markup
|
|
|
|
Add `data-bs-toggle="tooltip"` and a `title` to the element. `data-bs-placement` puts the tooltip at the top, bottom, left or right.
|
|
|
|
<Example>
|
|
<div class="btn-list">
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
|
|
</div>
|
|
</Example>
|
|
|
|
## Tooltip with HTML
|
|
|
|
Set `data-bs-html="true"` to allow HTML in the title, for example to emphasize one word.
|
|
|
|
<Example>
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
|
|
</Example>
|
|
|
|
## JavaScript
|
|
|
|
Tabler automatically initializes all elements with `data-bs-toggle="tooltip"` on page load. This is the code that runs:
|
|
|
|
<CodeDocs name="tooltip-init" file="core/js/src/tooltip.ts" />
|
|
|
|
## Accessibility
|
|
|
|
- A tooltip only describes; it never replaces a name. The trigger still needs its own text or `aria-label`.
|
|
- The trigger must be focusable. Bootstrap shows the tooltip on focus as well as on hover, so a `span` or an `a` without `href` leaves keyboard users with nothing.
|
|
- Never put a link, a button or a form field inside a tooltip. It disappears on blur, so nothing in it can be reached. Use a popover for that.
|
|
- Tabler enables HTML in a tooltip only when you set `data-bs-html="true"`. Leave it off for text that comes from users.
|
|
- Do not attach a tooltip to a disabled control - a disabled element fires no events. Wrap it in a focusable span instead.
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize tooltips. The default values are:
|
|
|
|
<CodeDocs name="tooltip-variables" file="core/scss/_variables.scss" />
|