# Tooltip Section (Advanced Tooltip)

> Adds Tippy.js-powered tooltips to any widget. Tooltip content, position, trigger, animation, and arrow style are all configurable.

**Class file:** `includes/Extensions/EAEL_Tooltip_Section.php` (474 lines)
**Slug:** `tooltip-section` (`config.php` `extensions` key)
**Public docs:** <https://essential-addons.com/elementor/docs/advanced-tooltip/>
**Pro-shared:** ✅ Pro-only (Lite has Promotion teaser)

## Overview

Adds an "Advanced Tooltip" panel under any widget's Style tab. Implementation is JS-driven — Pro injects a data attribute during `before_render_content`, then Tippy.js (loaded via popper.js) reads it and applies the tooltip.

## Features

- **Tooltip content** — text or HTML
- **Position** — top / bottom / left / right + auto
- **Trigger** — hover / click / focus
- **Animation** — Tippy presets (shift-away, scale, fade, etc.)
- **Arrow** — toggle + style
- **Theme** — light / dark / custom colors
- **Typography + box-shadow** — full Group_Control coverage

## Pro vs Lite

| Capability | Lite | Pro |
| --- | --- | --- |
| Panel visible in editor | Teaser only | ✅ |
| Tippy tooltips on any widget | ❌ | ✅ |

## File Map

| File | Role |
| --- | --- |
| `includes/Extensions/EAEL_Tooltip_Section.php` | Class — controls + `before_render_content` attribute injection |
| `src/js/edit/advanced-tooltip.js` → `assets/front-end/js/edit/advanced-tooltip.min.js` | Initialization script |
| `assets/front-end/css/lib-view/tippy/tippy.min.css` | Tippy.js base styling |
| `assets/front-end/js/lib-view/popper/popper.min.js` | popper.js (positioning) |
| `assets/front-end/js/lib-view/tippy/tippy.min.js` | Tippy.js |

## Architecture

Constructor wires 3 hooks (`EAEL_Tooltip_Section.php:17-21`):

```php
add_action( 'elementor/element/common/_section_style/after_section_end', [ $this, 'register_controls' ], 10 );
add_action( 'elementor/widget/before_render_content', [ $this, 'before_render' ] );
add_action( 'elementor/widget/before_render_content', [ $this, 'after_render' ] );
```

Note: **two hooks against `before_render_content`** — `before_render` and `after_render` are both registered against the same Elementor hook. Likely intentional (they fire in registration order to wrap content), but reads as suspicious. Verify when editing.

Tooltip applies to **widgets only** (`common/_section_style/after_section_end`). Sections / Containers don't get the panel — would need to add hooks for them.

## Controls Reference (high-value)

| Control id | Purpose |
| --- | --- |
| `eael_tooltip_section_enable` | Master switch |
| `eael_tooltip_settings` (tab) | Settings sub-tab (content / position / trigger / animation) |
| `eael_tooltip_style` (tab) | Style sub-tab (color / typography / arrow / shadow) |

Tippy.js handles all positioning, so most "style" controls map to CSS selectors on `.tippy-box`.

## Behavior Flow

1. **Editor:** user enables Advanced Tooltip on a widget. Configures content, position, trigger.
2. **Save:** settings persist.
3. **Frontend `before_render_content`:** Pro reads settings, appends data attribute (`data-tippy-content`, `data-tippy-placement`, etc.) to the widget wrapper.
4. **Frontend JS:** Tippy.js scans for `[data-tippy-content]` elements and attaches tooltips automatically.

## Asset Dependencies

| Asset | Type | Notes |
| --- | --- | --- |
| `tippy.min.css` | `lib`, `view` | Tippy base styles |
| `popper.min.js` | `lib`, `view` | Positioning engine |
| `tippy.min.js` | `lib`, `view` | Tooltip library |
| `advanced-tooltip.min.js` | `self`, `view` | **NOTE: source lives in `src/js/edit/` but config marks `'context' => 'view'`. Verify whether the path is wrong or the context is wrong** — see [`docs/architecture/extensions.md`](../architecture/extensions.md) § What's missing #3 |

## Hooks & Filters

### Elementor hooks consumed

| Hook | Method |
| --- | --- |
| `elementor/element/common/_section_style/after_section_end` | `register_controls` |
| `elementor/widget/before_render_content` | `before_render`, `after_render` (both registered) |

### Pro / EA hooks emitted

None.

## Behavior Quirks

- **Widgets only.** No tooltip support on Sections / Columns / Containers.
- **Two hooks on `before_render_content`** — both `before_render` and `after_render` callbacks. The naming is misleading; both fire on the same Elementor event.
- **JS path/context mismatch.** `src/js/edit/advanced-tooltip.min.js` in `'context' => 'view'`. The file actually needs to run on frontend, so the path is wrong (should be `src/js/view/`) but the context is right. Move the source.
- **`get_name()` method present but unused.** Class has `get_name() { return 'eael-tooltip-section'; }` but the registration loop doesn't call it (uses the slug from `config.php` instead).

## Known Limitations / Gaps

1. **Source path vs context mismatch** — `src/js/edit/` for a `'view'`-context script
2. **Section / Column / Container support missing** — tooltips can't be applied to layout elements, only widgets
3. **Two hook registrations against `before_render_content`** are confusing — refactor candidate
4. **No HTML content sanitization** flagged at the data-attribute level. If tooltip content allows HTML, verify upstream escape.
5. **`get_name()` is dead code** — extensions don't use `get_name`; widgets do.

## Code Pointers

- Constructor: `EAEL_Tooltip_Section.php:16-22`
- Controls: `:24+`
- `before_render` / `after_render`: search by name

## Cross-References

- Architecture: [`docs/architecture/extensions.md`](../architecture/extensions.md)
- Shared patterns: [`_patterns.md`](_patterns.md)