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.

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

Nyisd meg a Divi Supreme → Extensions oldalt.
Kapcsold be a Tooltip kiterjesztést (alapból ki van kapcsolva).
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

Kapcsold be a kiterjesztést, és töltsd újra a buildert.
Nyiss meg egy modult (például Button vagy Image).
Menj az Advanced → Tooltip részre, és kapcsold be az Enable Tooltip kapcsolót.
Szükség esetén állítsd be a Content Type értékét, majd írd be a Tooltip Content szövegét.
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.
Opcionálisan állítsd be a pozíciót, az indítót és a stílust (Background / Fonts / Spacing / Border / Box Shadow).
Mentsd, nyisd meg a nyilvános oldalt vagy az előnézetet, és vidd fölé az egeret (vagy kattints) a célra.

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.

Készült: 2026. november 1.