tooltip docs

2.7.0

Tooltip

Tooltip Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-tooltip
Source code
View on Github
Dependencies

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

tooltip direction variations

tooltip nowrap variations

tooltip spacing variations

tooltip trigger type variations

tooltip theme variations

Theme: xlight

Theme: light

Theme: dark

Theme: xdark