Tooltip

Estimated reading: 2 minutes 16 views

πŸ” Tooltip Extension (TPP Tooltip)

The Tooltip extension enhances user interaction by displaying contextual information when users hover over or focus on an element. It’s perfect for guiding users, clarifying content, or offering quick hints across buttons, icons, images, or any other Elementor widgets.

βœ… How to Enable Tooltip

To start using the Tooltip extension:

  1. Go to Dashboard β†’ Themepul Pack β†’ Extensions.
  2. Toggle Tooltip ON.

πŸŽ›οΈ Tooltip Settings (Elementor Panel β†’ Advanced Tab)

Once enabled, you’ll find a new Tooltip section under the Advanced tab of any Elementor widget.

Available Controls:

Setting Description
Enable Tooltip Toggle ON to activate tooltip for this widget.
Tooltip Text Enter the text or message that will appear on hover/focus

βš™οΈ Tooltip Behavior

Option Description
Position Choose where the tooltip appears relative to the element (Top, Bottom, Left, Right).
Show Arrow Enable/Disable the directional arrow pointing to the element.
Follow Cursor Set to Enabled to make the tooltip follow the user’s cursor.

πŸŒ€ Tooltip Animation

Control Description
Animation Select entrance effect: Fade, Zoom, Slide, etc.
Duration (ms) Duration of the tooltip animation in milliseconds.
Delay (ms) Delay before the tooltip appears.

🎨 Style Options

Control Description
Preset Style Choose from predefined styles or use Custom for full control.

🧩 Use Cases

  • Add descriptions for icons or buttons without cluttering the UI.
  • Display product tips, features, or pricing highlights.
  • Use tooltips on interactive charts, maps, or image hotspots.

Leave A Comment

All fields marked with an asterisk (*) are required