tooltip docs

Tooltip

Floating label that briefly describes an element.

Published Last updated: 5.5.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

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 This is what we call a tooltip. 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 Setting up preferred placement by using the placement prop. bottom Setting up preferred placement by using the placement prop. bottom-end Setting up preferred placement by using the placement prop.
left-start Setting up preferred placement by using the placement prop.
left Setting up preferred placement by using the placement prop.
left-end Setting up preferred placement by using the placement prop.
top-start Setting up preferred placement by using the placement prop. top Setting up preferred placement by using the placement prop. top-end Setting up preferred placement by using the placement prop. right-start Setting up preferred placement by using the placement prop. right Setting up preferred placement by using the placement prop. right-end Setting up preferred placement by using the placement prop.
Auto placement Auto placement only comes with fade-in transition. CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management

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 this example This is an inverted tooltip. .

tooltip use case icon

Closed for replies Solved This is no bueno. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttito. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.

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.
File size: 25MB 
<bolt-tooltip placement="top" uuid="target-this-unique-id">
  CRM
  <span slot="content">Customer relationship management</span>
</bolt-tooltip>