2.8.0

Tooltip

Tooltip Component in Bolt

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
  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: {
    type: "text",
    text: "This is the tooltip trigger"
  },
  content: "This is the tooltip content."
} only %}

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
  • LinkedIn
  • Copied!
This is the tooltip content.
This is the tooltip content.
This text should wrap if noWrap is set to false, otherwise it should not wrap.
This text should wrap if noWrap is set to false, otherwise it should not wrap.
This is the tooltip content.
This is the tooltip content.
This is the tooltip content.
This is the tooltip content.
This is the tooltip content.
This tooltip activates when the trigger is pressed.

Theme: xlight

This is the tooltip content.
This tooltip activates when the trigger is pressed.

Theme: light

This is the tooltip content.
This tooltip activates when the trigger is pressed.

Theme: dark

This is the tooltip content.
This tooltip activates when the trigger is pressed.

Theme: xdark

This is the tooltip content.
This tooltip activates when the trigger is pressed.