Skip to content
StoreDocsSupport
Get Divi Torque

Tooltip

The Tooltip module attaches a styled tooltip to a trigger you design: a piece of text, an icon or an image. It keeps small details one hover away without cluttering the page. The module needs Divi 5.

Divi Tooltip module demo with an open tooltip below a pill-shaped trigger

How to add the Tooltip module

  • Add a section and a row, then add the Tooltip module.
  • Pick the trigger type and enter the trigger text, icon or image.
  • Write the tooltip content and choose where the tip should appear.

Content

Trigger

  • Trigger: Text, Icon or Image. Default is Text.
  • Trigger Text, Trigger Icon or Trigger Image (with Image Alt Text), depending on the type. The default Trigger Text is "Hover me".

Tooltip

  • Tooltip Content: the text shown inside the tip. Rich text is allowed. Keep it short.

Behaviour

This group is labeled "Behaviour" in the builder.

  • Placement: twelve positions around the trigger. Top, Right, Bottom and Left, each with Start and End variants. Default is Top.
  • Open On: Hover or Click. Default is Hover. Keyboard focus always opens the tooltip too.
  • Animation: Fade or Scale. Default is Fade. The animation is skipped for visitors who have asked for reduced motion.
  • Show Arrow: the small pointer between the tip and the trigger. On by default.
  • Allow Hovering The Tooltip: keeps the tip open while the visitor moves into it, so links inside stay clickable. On by default.
  • Open Delay and Close Delay: defaults are 100ms and 0ms.
  • Trigger Alignment: Left, Center or Right. Default is Center.

Design

  • Trigger: Icon Color and Icon Size for icon triggers, and Image Width for image triggers.
  • Tooltip: Max Width (default 300px), Distance From Trigger (default 10px), Tooltip Background, Tooltip Text Color and Tooltip Corner Radius.

Tip

Tabbing to the trigger opens the tip and Escape closes it. This makes the module a good fit for definitions, pricing notes and small clarifications. Keep the text short.