Tooltip

Estimated reading: 2 minutes 8 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 → Topper 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:

SettingDescription
Enable TooltipToggle ON to activate tooltip for this widget.
Tooltip TextEnter the text or message that will appear on hover/focus

⚙️ Tooltip Behavior

OptionDescription
PositionChoose where the tooltip appears relative to the element (Top, Bottom, Left, Right).
Show ArrowEnable/Disable the directional arrow pointing to the element.
Follow CursorSet to Enabled to make the tooltip follow the user’s cursor.

🌀 Tooltip Animation

ControlDescription
AnimationSelect entrance effect: Fade, Zoom, Slide, etc.
Duration (ms)Duration of the tooltip animation in milliseconds.
Delay (ms)Delay before the tooltip appears.

🎨 Style Options

ControlDescription
Preset StyleChoose 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

Powered By EazyDocs