Tooltip

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

hello there

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

// 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.

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