Tooltip

Introduction

The Tooltip component is used to provide a pop-up text box that appears when a user hovers over, activates, focuses or clicks on a component within your form. This component is commonly used to display explanatory text, hints, descriptions, or context for any component, allowing for complex and dynamic tooltip content.

This component displays the pop-up messages using Whisper and Tooltip. It can be customized to appear on a specific trigger, and can also be customized with different placement, colors, and styles. The following introduces and describes properties and options presented for the tooltip component customization.

Main properties

These are the properties that are available within the Main tab. Note that all provided properties are required.

Name	Type	Description
Text	string	Determines the text content of the tooltip
Placement	choice	The position of the tooltip relative to the trigger element (e.g., Top, Bottom, Left, and so on)
Trigger	choice	The event that triggers the tooltip to appear. Refer to trigger options below for more details

Trigger options

These trigger options provide users with flexibility in determining how the tooltip should be activated based on different user interactions:

• Click: The tooltip will be triggered when the element is clicked and closed when clicked again.
• Context Menu: It will be triggered when you trigger context menu on the component.
• Focus: Typically triggered when the user clicks, taps on an element or selects it with the keyboard's tab key.
• Hover: Will be triggered when the cursor (mouse pointer) is hovering over the component.
• Active: Will be triggered when the element is activated.
• None: No trigger event, generally used when it needs to be triggered by a method.

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color