Tooltip option is available in the Widget’s “Advanced” tab.


There are 2 tabs in the “Tooltip” section. “Settings” tab and “Style” tab.


Settings Tab Option


Select the tooltip position from the drop-down options.


Enter your content for the tooltip.


This defines, how a user can find the tooltip. “Mouse Enter” means on hover the tooltip will be shown. And “Click” means after clicking on the elements the tooltip will be shown.


Choose the animation for the tooltip.


Offset defines the Horizontal space for Top and Bottom and Vertical space for Left and Right.


Distance defines the space between the elements and tooltip container.



Style Tab Option



Defines the total width of the tooltip.


Set the typography style in this option.

Text Color:

Set the content color of the tooltip here.

Text Alignment:

Align the content of the tooltip.

Background Type:

Here you can set the color, gradient color or image as the background of the tooltip.

Overlay Color:

Set the overlay color for the background. To set the overlay color transparency, adjust the last right bar in the color picker.

Arrow Color:

Set the arrow color of the tooltip.


Define the padding area in this option.

Border Type:

Select border type if you want to set a border for the tooltip.

Border Radius:

Set the radius of the border.

Box Shadow:

Set the box shadow of the tooltip.

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback