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 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
tooltip righttooltip lefttooltip bottomtooltip top
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
trigger 1trigger 2anchor 2anchor 1
code
<div bp-layout="inline gap:xs center" style="height: 250px">
<bp-button popovertarget="tooltip-1" id="anchor-1">trigger 1</bp-button>
<bp-button popovertarget="tooltip-2" id="anchor-2">trigger 2</bp-button>
<bp-tooltip id="tooltip-1" anchor="anchor-2" position="top">anchor 2</bp-tooltip>
<bp-tooltip id="tooltip-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
trigger 1trigger 2trigger 3hello there
code
<div bp-layout="inline gap:md center" style="height: 250px">
<bp-button popovertarget="tooltip-example">trigger 1</bp-button>
<bp-button popovertarget="tooltip-example" id="tooltip-btn">trigger 2</bp-button>
<bp-button popovertarget="tooltip-example">trigger 3</bp-button>
<bp-tooltip id="tooltip-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
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.
Events
| Name | Types | Description |
|---|
open | | dispatched when the tooltip is opened |
close | | dispatched when the tooltip is closed |
Properties
| Name | Types | Description |
|---|
closable | boolean | determine user closable state |
open | boolean | default popover to open on intialization |
position | Position | determine the position relative to the anchor |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
i18n | | set default aria/i18n strings |
Attributes
| Name | Types | Description |
|---|
closable | boolean | determine user closable state |
open | boolean | default popover to open on intialization |
position | Position | determine the position relative to the anchor |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
i18n | | set default aria/i18n strings |
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
--filter | | |
--background | | |
--color | | |
--width | | |
--height | | |
--min-width | | |
--min-height | | |
--font-size | | |
Slots
| Name | Types | Description |
|---|
default | | content |