---
title: "Tooltip"
url: "https://divitorque.com/docs/tooltip.md"
canonical: "https://divitorque.com/docs/tooltip/"
published: "2026-08-20"
modified: "2026-08-20"
author: "Fahim Reza"
tags:
  - "Modules"
---

# 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.

![Divi Tooltip module demo with an open tooltip below a pill-shaped trigger](https://divitorque.com/wp-content/uploads/2026/08/divi-tooltip-module-demo.png)

## How to add the Tooltip module

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

## Content

### Trigger

- **Trigger**: Text, Icon, or Image.
- **Trigger Text**, **Trigger Icon**, or **Trigger Image** (with **Image Alt Text**), depending on the type.
- **Trigger Alignment**: Left, Center, or Right.

### Tooltip

- **Tooltip Content**: the text shown inside the tip.
- **Placement**: twelve positions around the trigger (Top, Right, Bottom, Left, each with Start and End variants).
- **Open On**: Hover or Click.
- **Animation**: Fade or Scale.
- **Show Arrow**: toggle the small pointer between tip and trigger.
- **Allow Hovering The Tooltip**: keeps the tip open while the visitor moves into it, so links inside stay clickable.
- **Open Delay** and **Close Delay**.

## Design

- **Max Width** and **Distance From Trigger**.
- **Tooltip Background**, **Tooltip Text Color**, and **Tooltip Corner Radius**.
- **Icon Color** and **Icon Size** for icon triggers, **Image Width** for image triggers.

## Tip

The module is keyboard accessible out of the box. Tabbing to the trigger opens the tip and Escape closes it, so use it freely for definitions, pricing notes, and small clarifications.