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

Description

The tooltip component provides the user with a onHover Or onClick (button) toggle to display nearly any kind of content or Bolt Component nested within.

Use Cases (not limited to)

Help text
Navigational assistance (such as language select)
Used within other components, such as Share, to enhance functionality and presentation

Best Practices

Toggle icons should be tested to ensure smooth transition states
The noWrap option should only be used when small snippets of text or content are used

Usage

  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: {
    type: "text",
    text: "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)
Trigger *	Provides the data for our trigger type	`object`	—	`type` What kind of trigger are we using? `text` or `button` `text` The text for our trigger — `transform` Trigger text transformation `uppercase`, `lowercase`, `capitalize` `icon` Properties for including an icon with our trigger `name` Name of the icon to be used — `size` Size of the icon `small`, `medium`, `large`, `xlarge` `toggle` If using a `button` set optional toggle text / icon `text` The text for our toggle — `name` The icon for our toggle —
Content *	This can be text OR an included bolt component (like Block List)	`any`	—	—
Direction	Should tooltip push up or down?	`string`	`up`	`up` or `down`
NoWrap	`true` for single line content (short snippets)	`boolean`	`false`	`true` or `false`
Spacing	Spacing within our tooltip content bubble	`string`	`small`	`none`, `xsmall`, `small`, `medium`

Tooltip

Published

Overview

Install via NPM

Description

Use Cases (not limited to)

Best Practices

Usage

Schema