lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The toggletip component is used to provide explanations, definitions, or supplementary interactions for a given element. It should be used to provide additional information or actions that are not essential to the user's understanding of the content, but that may be helpful or informative.

Example

Wow this is a toggletip message!

DismissLearn More
code
<div bp-layout="block center" style="height: 350px">
  <bp-button-icon popovertarget="toggletip-example" id="toggletip-btn" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
  <bp-toggletip id="toggletip-example" anchor="toggletip-btn" position="top">
    <p bp-text="body">Wow this is a toggletip message!</p>
    <bp-button slot="footer" action="inline">Dismiss</bp-button>
    <bp-button slot="footer" action="inline">Learn More</bp-button>
  </bp-toggletip>
</div>
<script type="module">
  import '@blueprintui/components/include/toggletip.js';
  import '@blueprintui/components/include/button-icon.js';
  import '@blueprintui/icons/shapes/info.js';
</script>

Position

toggletip righttoggletip bottomtoggletip lefttoggletip top
code
<bp-toggletip open id="toggletip-1" anchor="toggletip-action-1" position="right">toggletip right</bp-toggletip>
<bp-toggletip open id="toggletip-2" anchor="toggletip-action-2" position="bottom">toggletip bottom</bp-toggletip>
<bp-toggletip open id="toggletip-3" anchor="toggletip-action-3" position="left">toggletip left</bp-toggletip>
<bp-toggletip open id="toggletip-4" anchor="toggletip-action-4" position="top">toggletip top</bp-toggletip>
<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="toggletip-1" id="toggletip-action-1" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
  <bp-button-icon popovertarget="toggletip-3" id="toggletip-action-3" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
  <bp-button-icon popovertarget="toggletip-2" id="toggletip-action-2" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
  <bp-button-icon popovertarget="toggletip-4" id="toggletip-action-4" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
</div>
<script type="module">
  import '@blueprintui/components/include/toggletip.js';
  import '@blueprintui/components/include/button-icon.js';
  import '@blueprintui/icons/shapes/info.js';
</script>

Install

NPM

// npm package
import '@blueprintui/components/include/toggletip.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/toggletip.js/+esm';
</script>

Accessibility

  • The component should be fully navigable using only the keyboard, allowing users to easily move between different toggletip.
  • The component should also provide a clear visual indication of focus for keyboard only users.

bp-toggletip

Events

NameTypesDescription
opendispatched when the toggletip is opened
closedispatched when the toggletip is closed

Properties

NameTypesDescription
closablebooleandetermine user closable state
openboolean
positionPosition
anchorHTMLElement | string
triggerHTMLElement | stringthe triggering element that opens the popover
i18nset default aria/i18n strings

Attributes

NameTypesDescription
closablebooleandetermine user closable state
openboolean
positionPosition
anchorHTMLElement | string
triggerHTMLElement | stringthe triggering element that opens the popover
i18nset default aria/i18n strings

CSS Properties

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

Slots

NameTypesDescription
defaultcontent