tooltip docs

2.16.1

Tooltip

Floating label that briefly describes an element.

Tooltip component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-tooltip
  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: "This is the tooltip trigger",
  content: "This is the tooltip content."
} only %}

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
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
Direction

This prop is deprecated. Please use placement instead.

any
NoWrap

This prop is deprecated. Please stop using it.

any
Spacing

This prop is deprecated. Please stop using it.

any

tooltip

A tooltip is used to provide descriptive help to the user about the control that the mouse is over. For instance, moving the mouse over this piece of text for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.
Preferred placement Preferred placement comes with fancy zoom-in transition.
bottom-start bottom bottom-end
left-start
left
left-end
top-start top top-end right-start right right-end
Auto placement Auto placement only comes with fade-in transition.
CRM CRM CRM
CRM
CRM
CRM
CRM CRM CRM CRM CRM CRM

tooltip use case icon

Web Component Usage Bolt Tooltip is a web component, you can simply use <bolt-tooltip> in the markup to make it render.
CRM Customer relationship management
<bolt-tooltip> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Prop Usage Configure the tooltip with the properties specified in the schema.
CRM Customer relationship management
<bolt-tooltip placement="top" uuid="target-this-unique-id"> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Advanced Usage Any element can be passed as the trigger.
Download File size: 25MB
<bolt-tooltip> <bolt-button>Download</bolt-button> <span slot="content">File size: 25MB</span> </bolt-tooltip>
Debug Panel