Bootstrap Tooltip ⚠

Last modified: February 16, 2024

1 Introduction

The Bootstrap Tooltip widget adds a tooltip to a user-defined field that contains help text or extra information.

1.1 Typical Usage Scenario

  • Add help text to an input field that is visible upon focus
  • Add informative text for buttons that is visible upon hovering

1.2 Feature

  • Based on Bootstrap’s tooltip.js

2 Installation

To install, import the Bootstrap Tooltip widget into your app and add the widget on a page. Locate the widget as close to the target element as possible (preferably next to it).

When an element has a tooltip attached to it and needs to be conditionally visible, put both the element and the tooltip together in a container and apply the visibility conditions to the container instead of the element:

3 Configuration

You can configure the properties below to determine how the widget will behave in your application.

3.1 Appearance Tab

  • Target element classname – the class name of the field to which you want to attach the tooltip
  • Render HTML – selecting Yes renders the tooltip content as HTML
  • Tooltip position – the location of the tooltip relative to the field
  • Tooltip mode – when to show the tooltip

3.2 Data Source Tab

  • Default text – the text displayed when no data source microflow is defined
  • Tooltip source microflow – the microflow that returns the text to be displayed in the tooltip