# Tooltip: buboréksúgó bármelyik modulra

> Az Advanced → Tooltip csoport szakaszokon, soron, oszlopon és modulokon: tartalom, pozíció, indító, viselkedés, stílus és a Divi saját Tooltip moduljától való különbség.

A Tooltip kiterjesztés **Advanced → Tooltip** csoportot ad a szakaszokhoz, sorokhoz, oszlopokhoz és modulokhoz. Így a már megtervezett elemre (gomb, kép, címsor, oszlop, szakasz) tehetsz buboréksúgót. A kiterjesztést egyszer kapcsold be, majd minden kívánt modulon kapcsold be az **Enable Tooltip** kapcsolót.

Választható (opt-in) Divi Supreme Pro kiterjesztés. A script és a stílus a nyilvános oldalon csak akkor töltődik be, ha az oldalon legalább egy tooltip be van kapcsolva.

## Miért ez, és nem a Divi saját Tooltip modulja

A Divi 5 saját Tooltip modulja (`divi/tooltip`) külön blokk, amelyet beszúrsz. A súgó szövegét azon a modulon írod, belé más modulokat is ágyazhatsz, és a Divi a Tooltip modul szülőjéhez rendeli. Indító: hover, kattintás vagy mindig. A pozíció a Divi belső/külső rácsa, a nyíl színe, helye és eltolása külön vezérlő.

Ez akkor jó, ha külön tooltip-objektum kell az elrendezésben. Ha csak rövid súgó kell egy már kész gombra, képre vagy címsorra, nehézkes.

| Divi Tooltip modul | Supreme Tooltip kiterjesztés |
|---|---|
| Beszúrsz egy Tooltip modult, és beágyazod, hogy szülőt találjon. | Megnyitod a meglévő modult → **Advanced → Tooltip**. |
| A tartalom a Tooltip modulon van. | A tartalom a modul **Enable Tooltip** csoportjában van. |
| A meglévő elrendezést át kell építeni. | Az elrendezés marad, ahogy van. |
| Egy modultípus, egy szülőhöz kötés. | Szakaszok, sorok, oszlopok, Divi modulok, Supreme modulok és minden modul, amelynek van Advanced füle. |
| Hover / kattintás / mindig. | Hover, kattintás, fókusz, hover + fókusz vagy kézi. |
| Rögzített vagy kurzort követő. | Rögzített, kurzort követő, vízszintesen vagy függőlegesen követő, vagy kezdőpontot követő. |
| Nyílszín / helye / eltolása a modulon. | Opcionális nyíl, amely a tooltip hátterét (szín, színátmenet, kép) használja. |

Nem azonos a következőkkel: a Copy to Clipboard „Copied” üzenete, valamint a Supreme Buttons, az Image Hotspots és az Icon List beépített súgói. Ezek a saját moduljukon maradnak. A Tooltip akkor való, ha ugyanazt a súgót Szövegre, Képre, Gombra, Blurbre vagy elrendezési blokkra akarod.

## Mit tud

- **Súgó bármely meglévő modulra:** az **Enable Tooltip** után a látogató interakciójára megjelenik a súgó, külön burkoló modul nélkül.
- **Sima, formázott vagy dinamikus tartalom:** **Content Type** és **Tooltip Content** (dinamikus tartalom is használható). Az **Allow HTML** formázott szövegnél engedi a HTML-t.
- **Teljes modul vagy belső elem:** a **Custom Selector** egy modulon belüli elemre köti (például `a` vagy `.et_pb_button`).
- **Pozíció:** hol jelenjen meg a célhoz képest; az **Auto** a képernyő széléhez közel a legjobb oldalt választja.
- **Eltolás és távolság:** a súgó mozgatása a cél éle mentén, illetve a távolság (alapértékek `0px` / `8px`).
- **Indítók és mozgás:** mikor jelenjen meg, és rögzített legyen-e vagy kövesse a kurzort.
- **Késleltetés, interaktív, ragadós, érintés:** mennyit várjon megjelenítés és elrejtés előtt; a látogató ráléphet a súgóra; elrejtés kattintásra; érintőképernyős működés.
- **Doboz stílusozása a Divi csoportjaival:** **Background** (videó, minta és maszk nélkül), **Fonts**, **Spacing**, **Border**, **Box Shadow**.
- **Nyíl, legnagyobb szélesség, z-index, hozzáfűzés helye:** opcionális nyíl; legnagyobb szélesség `350px`; z-index `9999`; hozzáfűzés a szülőhöz vagy a törzshöz.
- **Reszponzív:** a pozíció, eltolás, távolság, indító, mozgás, hozzáfűzés helye, legnagyobb szélesség, nyílméret és érintés töréspontonként állítható.

## Használati esetek

| Eset | Hogyan |
|---|---|
| Súgó egy gombon | **Enable Tooltip** a meglévő Button modulon. |
| Képfelirat | Súgó hoverre, anélkül hogy a képet Tooltip modulba csomagolnád. |
| Súgó egy Blurbön belüli hivatkozáson | **Custom Selector**: `a`, így csak a hivatkozás nyitja a súgót. |
| Oszlop- vagy szakasztipp | Ugyanaz az Advanced csoport az elrendezési blokkokon. |
| Dinamikus mező értéke | **Tooltip Content** dinamikus tartalommal (bejegyzéscím, egyéni mező stb.). |

## Mikor ne használd

- Ha a súgóba teljes elrendezés kell: a Divi saját Tooltip modulja beágyazott modulokat is tud, ez a kiterjesztés csak szöveget vagy HTML-t.
- Ha csak a „Copied” üzenet kell: az a Copy to Clipboard funkciója.
- Ha a modulnak nincs Advanced füle, nem jelenik meg rajta a csoport.
- Üres **Tooltip Content** esetén nem jön létre súgó.

## Bekapcsolás

1. Nyisd meg a **Divi Supreme → Extensions** oldalt.
2. Kapcsold be a **Tooltip** kiterjesztést (alapból ki van kapcsolva).
3. Mentsd, majd töltsd újra a Visual Buildert, hogy az **Advanced → Tooltip** megjelenjen.

Beállításkulcs: `dsm_use_tooltip`. Amíg ki van kapcsolva, a csoport nem látszik, és a nyilvános oldalon a Tippy-eszközök nem futnak. Külön Tooltip beállítófül nincs, minden modulonkénti beállítás az **Advanced → Tooltip** alatt van.

## Első lépések

1. Kapcsold be a kiterjesztést, és töltsd újra a buildert.
2. Nyiss meg egy modult (például Button vagy Image).
3. Menj az **Advanced → Tooltip** részre, és kapcsold be az **Enable Tooltip** kapcsolót.
4. Szükség esetén állítsd be a **Content Type** értékét, majd írd be a **Tooltip Content** szövegét.
5. A **Tooltip Target** maradjon **Whole Module**, vagy válaszd a **Custom Selector** lehetőséget, és adj meg egy modulon belüli választót.
6. Opcionálisan állítsd be a pozíciót, az indítót és a stílust (Background / Fonts / Spacing / Border / Box Shadow).
7. Mentsd, nyisd meg a nyilvános oldalt vagy az előnézetet, és vidd fölé az egeret (vagy kattints) a célra.

## Az Advanced → Tooltip csoport

Az almenük csak az **Enable Tooltip** bekapcsolása után jelennek meg.

| Terület | Mit szabályoz |
|---|---|
| **Enable Tooltip** | Súgó megjelenítése, amikor a látogató a modullal érintkezik. |
| Tartalom | Típus, szöveg, HTML engedélyezése, cél, egyéni választó. |
| Pozíció | Elhelyezés, eltolás, távolság. |
| Viselkedés | Indító, mozgás, késleltetések, interaktív, elrejtés kattintásra, ragadós, érintés. |
| Stílus | Animáció, időtartam, hozzáfűzés helye, legnagyobb szélesség, z-index, nyíl, CSS-osztály. |
| Dekoráció | A súgódoboz háttere, betűtípusa, térköze, szegélye és árnyéka. |

### Tartalom

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Content Type** | Plain Text | Sima szöveg, formázott szöveg vagy dinamikus tartalom. |
| **Tooltip Content** | üres | A súgóban látszó szöveg; dinamikus tartalom is használható. |
| **Allow HTML** | ki | HTML engedélyezése, ha formázott szöveget használsz. |
| **Tooltip Target** | Whole Module | A teljes modul vagy egy benne lévő elem. |
| **Custom Selector** | üres | CSS-választó a modulon belül, például `a` vagy `.et_pb_button`. Csak **Custom Selector** célnál látszik. |

Ha az egyéni választó semmire nem illeszkedik, a súgó nem kapcsolódik sehová.

### Pozíció

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Tooltip Position** | Top | Hol jelenjen meg a célhoz képest. Az **Auto** a képernyő széléhez közel a legjobb oldalt választja. |
| **Tooltip Skid** | 0px | A súgó eltolása a cél éle mentén. |
| **Tooltip Distance** | 8px | A súgó és a cél közti távolság. |

Az elhelyezés tartalék oldalakra vált, hogy a súgó a képernyőn maradjon.

### Viselkedés

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Show Tooltip On** | Hover | Hover, kattintás, fókusz, hover + fókusz vagy kézi. |
| **Tooltip Movement** | Anchored | Egy helyben marad, vagy követi a kurzort. |
| **Tooltip Open Delay** | 0ms | Mennyit vár megjelenítés előtt. |
| **Tooltip Close Delay** | 0ms | Mennyit vár elrejtés előtt. |
| **Interactive** | ki | A látogató ráviheti a kurzort a súgóra anélkül, hogy bezárulna. |
| **Interactive Border** | 0px | A súgó körüli plusz terület, amely még a súgón lévőnek számít. Csak bekapcsolt **Interactive** mellett látszik. |
| **Hide On Click** | be | A cél kattintására elrejti a súgót. |
| **Sticky** | ki | Látható marad, miközben a cél és a súgó között mozog a kurzor. |
| **Touch Behavior** | Enabled | Telefonon és táblagépen: engedélyezett, letiltott vagy „tartva mutat”. |

A kézi (manual) indító mellett a súgó magától nem nyílik hoverre vagy kattintásra.

### Stílus és dekoráció

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Animation** | Fade | Hogyan jelenik meg és tűnik el: None, Fade, Scale, Shift away, Shift toward, Perspective. A None is fade-et használ, de nulla időtartammal. |
| **Animation Duration** | 300ms | A megjelenítő és elrejtő animáció hossza. A csökkentett mozgást kérő látogatóknak 0. |
| **Append To** | Parent | A Parent a súgót a modullal tartja; ha egy szülő levágja, a Body segíthet. |
| **Max Width** | 350px | A súgó legnagyobb szélessége. |
| **Z-Index** | 9999 | Más elemek fölött jelenik-e meg. |
| **Show Tooltip Arrow** | ki | Nyíl a célra mutatva; a nyíl a súgó hátterét használja (szín, színátmenet vagy kép). |
| **Arrow Size** | 8px | A nyíl mérete. Csak bekapcsolt nyílnál látszik. |
| **Tooltip CSS Class** | üres | Opcionális CSS-osztály a súgóra. |

Bekapcsolt **Enable Tooltip** mellett a Divi **Background**, **Fonts**, **Spacing**, **Border** és **Box Shadow** csoportja a súgódobozra vonatkozik (a Background nem kínál videót, mintát és maszkot).

## Beállítások az adatbázisban

| Beállítás | Típus | Alapérték | Leírás |
|---|---|---|---|
| **Tooltip** | jelölőnégyzet | ki | Főkapcsoló az Extensions fülön (`dsm_use_tooltip`). |

A nyilvános oldalon a beállítások a modul burkolóelemén tárolódnak (`data-dsm-tooltip`). Egy korábbi, megmaradt nyílszín-attribútum átalakításkor törlődik, és nem kerül át a Backgroundra.

## Tippek

- Kapcsold be a kiterjesztést, és töltsd újra a Visual Buildert, mielőtt az **Advanced → Tooltip** csoportot keresed.
- Ha a teljes modul nagy találati terület, de csak egy hivatkozáson vagy gombon kell a súgó, használd a **Custom Selector** lehetőséget.
- Ha a súgót levágja egy szülőelem, állítsd az **Append To** értékét **Body**-ra.
- Az **Allow HTML** maradjon ki, hacsak nem kell formázás: sima szövegből a nyilvános oldalon a címkék törlődnek.
- Próbáld ki hoverrel és érintéssel is; telefonon a kattintás vagy a tartva mutatás használhatóbb.
- Az eszközök csak akkor töltődnek be, ha egy modulon be van kapcsolva az **Enable Tooltip**, és a tartalom nem üres.