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 interestfor="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 interestfor="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 interestfor="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 interestfor="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 interestfor="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 interestfor="tooltip-anchors-1" id="anchor-1">trigger 1</bp-button>
<bp-button interestfor="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 interestfor="tooltip-multi-trigger-example">trigger 1</bp-button>
<bp-button interestfor="tooltip-multi-trigger-example" id="tooltip-btn">trigger 2</bp-button>
<bp-button interestfor="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 |
position | Position | Specifies the position of the tooltip relative to its anchor element |
i18n | Provides internationalization strings for translated text content | |
popoverConfig | PopoverConfig | Configuration options for popover behavior - override this getter in subclasses |
open | boolean | Controls whether the popover is visible on initialization |
anchor | HTMLElement | string | Defines the anchor element or selector that the popover will position relative to |
Attributes
| Name | Types | Description |
|---|---|---|
closable | boolean | Determines whether a close button is displayed for dismissing the tooltip |
position | Position | Specifies the position of the tooltip relative to its anchor element |
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 |