What is it?

Tooltip allows you to display helpful, customizable tooltips over specific elements on your webpage. These tooltips appear when users hover over or click on designated elements, providing a clean and modern way to display additional information.

How to set it up?

To activate a tooltip on an element, simply add the data-tooltip-text attribute with the desired tooltip text. Additional customization attributes allow for control over the tooltip’s appearance.

'data-tooltip-text'. The content of the tooltip. Type: Text (e.g., "More info").

'data-tooltip-size' (Optional). Sets the font size of the tooltip text. Type: String (e.g., "16px"). Default: "16px".

'data-tooltip-color' (Optional). Sets the color of the tooltip text. Type: Color (e.g., "black" or "#333333"). Default: "black".

'data-tooltip-bg' (Optional). Defines the background color of the tooltip. Type: Color (e.g., "white" or "rgba(0, 0, 0, 0.8)"). Default: "white".