Bolt Design System

Overview

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

Install via NPM

npm install @bolt/components-tooltip

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`	—	—
NoWrap	This prop is deprecated. Please stop using it.	`any`	—	—
Spacing	This prop is deprecated. Please stop using it.	`any`	—	—

Tooltip

Published

Overview

Install via NPM

Usage

Schema