Tooltip

Floating label that briefly describes an element.

Published Last updated: 5.7.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-tooltip/tooltip.twig' with {
  trigger: 'This is the tooltip trigger',
  content: 'This is the tooltip content.'
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-tooltip> tag.

object
trigger *

Renders the trigger of the tooltip.

any
content *

Renders the content of the tooltip. Plain text is preferred because this is supposed to be a simple label. For passing more complex content and actions, please use Popover instead.

any
placement

Sets the preferred placement of the tooltip. The actual placement of the tooltip will be automatically adjusted based on the space available on screen.

string top
  • auto, top-start, top, top-end, left-start, left, left-end, right-start, right, right-end, bottom-start, bottom, bottom-end
inverted

Invert the colors of the tooltip content. If true, content will be dark text on light background

boolean
uuid

Unique ID for the tooltip, randomly generated if not provided.

string
boundary

Optionally allows you to specify a parent element selector to use as an outer boundary when calculating placement.

string
fallbackPlacements

An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.

array
aria_type

This sets the specific aria attribute for rendering the tooltip, the 2 available options do different things. 'labelledby' sets the tooltip text as the accessible name for the trigger, while 'describedby' keeps the trigger's accessible name (it must have one in such case) and provides additional description.

string labelledby
  • labelledby or describedby
direction
(deprecated)

This prop is deprecated. Please use placement instead.

any
noWrap
(deprecated)

This prop is deprecated. Please stop using it.

any
spacing
(deprecated)

This prop is deprecated. Please stop using it.

any
Install Install
npm install @bolt/components-tooltip
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue