Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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.

bp-tooltip

Properties

NameTypesDescription
closableboolean
positionPosition
anchorHTMLElement | string
triggerHTMLElement | string
i18n
hiddenboolean

Attributes

NameTypesDescription
closableboolean
positionPosition
anchorHTMLElement | string
triggerHTMLElement | string
i18n
hiddenboolean

CSS Properties

NameTypesDescription
--padding
--filter
--background
--color
--width
--height
--min-width
--min-height
--font-size

Slots

NameTypesDescription
defaultcontent