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
noWrapoption 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) |
|---|---|---|---|---|
|
|
Provides the data for our trigger type |
object
| — |
|
|
|
This can be text OR an included bolt component (like Block List) |
any
| — |
|
|
|
Should tooltip push up or down? |
string
|
up
|
|
|
|
|
boolean
|
false
|
|
|
|
Spacing within our tooltip content bubble |
string
|
small
|
|