tooltip docs

Tooltip

Floating label that briefly describes an element.

Published Last updated: 4.6.0 Change log Github NPM
Twig Usage
Twig 
{% 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 —
  • —
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
Bash 
npm install @bolt/components-tooltip
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue

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 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.
Auto placement Auto placement only comes with fade-in transition.

tooltip inverted

Inverted Colors By default, a tooltip has white text on black background. When you are building content in dark themes, you may utilize the inverted prop to invert the colors so it stands out better against the dark background. Such as .

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.
HTML 
<bolt-tooltip>
  CRM
  <span slot="content">Customer relationship management</span>
</bolt-tooltip>
Prop Usage Configure the tooltip with the properties specified in the schema.
HTML 
<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.
HTML 
<bolt-tooltip placement="top" uuid="target-this-unique-id">
  CRM
  <span slot="content">Customer relationship management</span>
</bolt-tooltip>