The tooltip component is used to provide additional information to the user when they hover over a specific element. It can be used to provide explanations, definitions, or supplementary information that is not critical to the main content.
Example
Displays brief contextual information on hover or focus.
code
<div bp-layout="block center" style="height: 250px">
<bp-button-icon popovertarget="tooltip-example" action="flat" shape="info" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip id="tooltip-example">hello there</bp-tooltip>
</div>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/info.js';
</script>Position
Demonstrates tooltip positioning options.
code
<div bp-layout="grid gap:md cols:6 block:stretch center" style="padding-top: 100px; max-height: 95vh; min-height: 340px">
<bp-button-icon popovertarget="tooltip-1" action="flat" shape="info" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip id="tooltip-1" position="right">tooltip right</bp-tooltip>
<bp-button-icon popovertarget="tooltip-2" action="flat" shape="info" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip id="tooltip-2" position="left">tooltip left</bp-tooltip>
<bp-button-icon popovertarget="tooltip-3" action="flat" shape="info" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip id="tooltip-3" position="bottom">tooltip bottom</bp-tooltip>
<bp-button-icon popovertarget="tooltip-4" action="flat" shape="info" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip id="tooltip-4" position="top">tooltip top</bp-tooltip>
</div>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/info.js';
</script>Anchor
Shows tooltip anchored to specific elements.
code
<div bp-layout="inline gap:xs center" style="height: 250px">
<bp-button popovertarget="tooltip-anchors-1" id="anchor-1">trigger 1</bp-button>
<bp-button popovertarget="tooltip-anchors-2" id="anchor-2">trigger 2</bp-button>
<bp-tooltip id="tooltip-anchors-1" anchor="anchor-2" position="top">anchor 2</bp-tooltip>
<bp-tooltip id="tooltip-anchors-2" anchor="anchor-1" position="top">anchor 1</bp-tooltip>
</div>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button.js';
import '@blueprintui/icons/shapes/info.js';
</script>Multi Trigger
Demonstrates tooltip with multiple trigger elements.
code
<div bp-layout="inline gap:md center" style="height: 250px">
<bp-button popovertarget="tooltip-multi-trigger-example">trigger 1</bp-button>
<bp-button popovertarget="tooltip-multi-trigger-example" id="tooltip-btn">trigger 2</bp-button>
<bp-button popovertarget="tooltip-multi-trigger-example">trigger 3</bp-button>
<bp-tooltip id="tooltip-multi-trigger-example" anchor="tooltip-btn" position="top">hello there</bp-tooltip>
</div>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button.js';
import '@blueprintui/icons/shapes/info.js';
</script>Install
NPM
// npm package
import '@blueprintui/components/include/tooltip.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tooltip.js/+esm';
</script>Accessibility
- The component should be fully navigable using only the keyboard, allowing users to easily move between different tooltips.
- The component should also provide a clear visual indication of focus for keyboard only users.
bp-tooltip
Events
| Name | Types | Description |
|---|---|---|
open | dispatched when the tooltip is opened | |
close | dispatched when the tooltip is closed |
Properties
| Name | Types | Description |
|---|---|---|
closable | boolean | Determines whether a close button is displayed for dismissing the tooltip |
open | boolean | Controls whether the tooltip is visible on initialization |
position | Position | Specifies the position of the tooltip relative to its anchor element |
anchor | HTMLElement | string | Defines the anchor element or selector that the tooltip will position relative to |
i18n | Provides internationalization strings for translated text content |
Attributes
| Name | Types | Description |
|---|---|---|
closable | boolean | Determines whether a close button is displayed for dismissing the tooltip |
open | boolean | Controls whether the tooltip is visible on initialization |
position | Position | Specifies the position of the tooltip relative to its anchor element |
anchor | HTMLElement | string | Defines the anchor element or selector that the tooltip will position relative to |
i18n | Provides internationalization strings for translated text content |
CSS Properties
| Name | Types | Description |
|---|---|---|
--padding | ||
--filter | ||
--background | ||
--color | ||
--width | ||
--height | ||
--min-width | ||
--min-height | ||
--font-size |
Slots
| Name | Types | Description |
|---|---|---|
default | content |