tooltip docs

Tooltip

Floating label that briefly describes an element.

Published Last updated: 2.28.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
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
(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 @popperjs/core

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.

tooltip placement variations

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

tooltip with web component

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>