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
code
<div bp-layout="block" style="min-height: 200px">
<bp-button-icon bp-layout="center" id="tooltip-btn" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip anchor="tooltip-btn" trigger="tooltip-btn" position="top">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-circle.js';
</script>
Interactive
code
<div bp-layout="block" style="min-height: 200px">
<bp-button-icon bp-layout="center" id="btn" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip hidden anchor="btn" trigger="btn" position="top" id="tooltip">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-circle.js';
const tooltip = document.querySelector('#tooltip');
tooltip.addEventListener('open', () => (tooltip.hidden = false));
tooltip.addEventListener('close', () => (tooltip.hidden = true));
</script>
Position
tooltip right
tooltip left
tooltip bottom
tooltip top
code
<div bp-layout="grid gap:md cols:6 block:stretch center" style="margin-top: 100px; min-height: 100vh">
<div>
<bp-button-icon id="tooltip-action-1" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip anchor="tooltip-action-1" position="right">tooltip right</bp-tooltip>
</div>
<div>
<bp-button-icon id="tooltip-action-3" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip anchor="tooltip-action-3" position="left">tooltip left</bp-tooltip>
</div>
<div>
<bp-button-icon id="tooltip-action-2" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip anchor="tooltip-action-2" position="bottom">tooltip bottom</bp-tooltip>
</div>
<div>
<bp-button-icon id="tooltip-action-4" shape="info-circle" aria-label="open tooltip"></bp-button-icon>
<bp-tooltip anchor="tooltip-action-4" position="top">tooltip top</bp-tooltip>
</div>
</div>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/info-circle.js';
</script>
Install
NPM
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.
Properties
Name | Types | Description |
closable | boolean | |
position | Position | |
anchor | HTMLElement | string | |
trigger | HTMLElement | string | |
i18n |
| |
hidden | boolean | |
Attributes
Name | Types | Description |
closable | boolean | |
position | Position | |
anchor | HTMLElement | string | |
trigger | HTMLElement | string | |
i18n |
| |
hidden | boolean | |
CSS Properties
Name | Types | Description |
--padding |
| |
--filter |
| |
--background |
| |
--color |
| |
--width |
| |
--height |
| |
--min-width |
| |
--min-height |
| |
--font-size |
| |
Slots
Name | Types | Description |
default |
| content |