tooltip docs

2.15.2

Tooltip

Floating label that briefly describes an element.

Published

History
View changes
Install
yarn add @bolt/components-tooltip
Source code
View on Github
Dependencies
@bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @popperjs/core

Overview

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

Install via NPM
npm install @bolt/components-tooltip
Overview Usage Schema Edit this page Testing Steps

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-menu> 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 bottom
  • 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 —
  • —
direction

This prop is deprecated. Please use placement instead.

 any —
  • —
no_wrap

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 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 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.
Download File size: 25MB
<bolt-tooltip> <bolt-button>Download</bolt-button> <span slot="content">File size: 25MB</span> </bolt-tooltip>
Debug Panel