Docs

Components

Tooltip

Call attention to UI elements and guide users through a process.

Tooltip

Overview

The tooltip component is great to call attention to UI elements and guide users through a process. It is typically used as a part of a tour or to provide additional information about a specific element. You can use the tooltip component out of the box as a built-in component.

Installation

To integrate the tooltip component into your application, install the Flows components package. This package provides the tooltip along with other built-in components. For detailed instructions, see React installation or JavaScript installation.

Workflow properties

When using the tooltip component in a workflow, you can define the following properties:

NameTypeNotes
TitlestringThe title of the tooltip.
BodystringThe body of the tooltip. Supports HTML.
Continue textstringThe text of the continue button. When empty the button is not rendered.
Target elementstringThe CSS selector of the element the tooltip should be attached to.
PlacementselectThe placement of the tooltip.
Show close buttonbooleanShow a close button in the top right corner. Default is false.
Hide overlaybooleanHide the overlay when the tooltip is open. Default is false.

Exit nodes:

  • Continue: The user clicks the continue button.
  • Close: The user closes the tooltip.

Tour properties

When using the tooltip component in a tour, you can define additional properties to control the tour flow.

NameTypeNotes
TitlestringThe title of the tooltip.
BodystringThe body of the tooltip. Supports HTML.
Continue textstringThe text of the continue button. When empty the button is not rendered.
Previous textstringThe text of the previous button. When empty the button is not rendered.
Target elementstringThe CSS selector of the element the tooltip should be attached to.
PlacementselectThe placement of the tooltip.
Show close buttonbooleanShow a close button in the top right corner. Default is false.
Hide overlaybooleanHide the overlay when the tooltip is open. Default is false.
Page targeting---What page the tour should be shown on. Learn more
Wait---Used to define what interaction should trigger the next step. Learn more

Exit nodes:

  • Continue: When the user clicks the continue button the tour moves to the next step.
  • Previous: When the user clicks the previous button the tour moves to the previous step.
  • Cancel: When the user closes the tooltip the tour is canceled.

On this page