# Eszköztipp

> Felugró szöveg, kép vagy sablon bármelyik widgethez, Elementorban és a blokkszerkesztőben.

Az eszköztipp (tooltip) egy kis felugró ablak, amely szöveget, képet vagy ikont mutat, ha a látogató fölé viszi az egeret (vagy rákattint) egy képen, táblázaton, címsoron vagy más elemen. Termékekhez és szolgáltatásokhoz adhatsz vele háttér-információt.

## A kiterjesztés bekapcsolása

1. Nyisd meg a **Crocoblock → JetPlugins Settings** oldalt, és válaszd a **JetTricks → Widgets & Extensions** részt.
2. Kapcsold be a **Tooltip Widget Extension** kapcsolót. A változás automatikusan mentődik.

## Beállítás az Elementorban

1. Szerkeszd az oldalt az Elementorral, és szúrd be a widgetet, amelyhez az eszköztippet adod (például egy **Kép** widgetet).
2. Nyisd meg a widget **Haladó** fülét, azon belül a **JetTricks** szakaszt.
3. Kapcsold be az **Eszköztipp használata?** kapcsolót.

![A kijelölt Kép widget Haladó fülén bekapcsolt eszköztipp](./kepek/tooltip-szerkeszto.webp)

*A kijelölt Kép widget Haladó fülén bekapcsolt eszköztipp* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

A kapcsoló alatt két fül jelenik meg: **Beállítások** és **Stílus**.

### Beállítások fül

Először a **Content Type** mezőben válaszd ki a tartalom típusát: **Editor** (alapértelmezett) vagy **Template**.

**Editor** típus esetén:

| Beállítás | Mit csinál |
| --- | --- |
| **Leírás** | A felugró tartalom: szöveg, kép vagy ikon. |
| **Placement** | Az eszköztipp helye a widgethez képest. Alapértelmezetten felül van. |
| **Use Arrow?** | Az eszköztipp melletti nyíl. Alapértelmezetten be van kapcsolva. |
| **Animation** | A megjelenés animációja. |
| **Trigger** | Mi váltja ki a megjelenést (például egér fölé húzás). |
| **Show Tooltip On** | Mely eszközökön látszik: **Desktop**, **Tablet Portrait**, **Mobile Portrait**. Ezzel például csak mobilon jeleníthetsz meg eszköztippet. |
| **Follow Cursor** | Az eszköztipp követi-e az egérmutatót. Alapértelmezetten **Disabled**, vagyis rögzített. |
| **Delay** | Mennyi idő múlva jelenjen meg, illetve tűnjön el. |
| **Offset** | Az eszköztipp és a célelem távolsága. Fent vagy lent elhelyezett eszköztipp esetén balra-jobbra, oldalt elhelyezettnél fel-le tolja. |
| **Distance** | Mekkora utat tesz meg az eszköztipp az animáció közben. |
| **Z-Index** | A rétegsorrend: a nagyobb érték elöl jelenik meg. |
| **Append tooltip** | Hová kerüljön az eszköztipp: **Widget container** vagy **Document body**. |
| **Custom Selector** | Ha csak a widget egy részére akarsz eszköztippet (például egy táblázat egyetlen cellájára), másold ide az elem CSS-osztályát a widget kódjából. |

**Template** típus esetén a leírás és néhány más mező eltűnik, helyette a **Choose Template** mezőben egy Elementor-sablont választhatsz tartalomnak. A többi mező (**Placement**, **Use Arrow?**, **Animation**, **Trigger** stb.) ugyanaz, mint az **Editor** típusnál.

### Stílus fül

Az eszköztipp kinézete: szélesség, tipográfia, szövegszín, szövegigazítás, háttér, nyílszín, belső margó, szegély lekerekítése és még néhány beállítás.

Mentsd az oldalt, majd nézd meg a működést az oldalon.

![A Kép widget eszköztippje a látogató oldalán](./kepek/tooltip-frontend.webp)

*A Kép widget eszköztippje a látogató oldalán* (https://minta-bolt.hu/jettricks-demo/)

A képen a mutató a kép fölött van, ezért az eszköztipp látszik.

## Beállítás a blokkszerkesztőben

1. Szúrd be a blokkot (például **Kép** blokkot).
2. A blokk beállításaiban nyisd ki a **JetTricks → Tooltip** részt, és kapcsold be az **Enable Tooltip** kapcsolót.
3. A beállítások az Elementoréhoz hasonlók:
   - **TOOLTIP CONTENT**: az eszköztipp szövege.
   - **PLACEMENT**: a helye, például **Top**, **Top Start**.
   - **Show Arrow**: nyíl megjelenítése.
   - **ANIMATION**: animáció, például **Fade**, **Shift**.
   - **TRIGGER**: a megjelenést kiváltó esemény.
   - **SHOW TOOLTIP ON**: eszköz (**Desktop**, **Tablet**, **Mobile**).
   - **FOLLOW CURSOR**: a mutató követése (alapértelmezetten **Disabled**).
   - **DELAY (MS)**: késleltetés.
   - **OFFSET X** és **OFFSET Y**: eltolás.
   - **Z-INDEX**: rétegsorrend.
   - **APPEND TOOLTIP TO**: **Block container** vagy **Document body**.
   - **CUSTOM SELECTOR**: a blokk egy részére korlátozás CSS-osztállyal.

## Gyakori kérdések

**Hogyan jeleníthetek meg eszköztippet csak mobilon?**
A **Show Tooltip On** listában válaszd ki a kívánt eszközöket.

**Használhatok logót ikon helyett a hotspotban?**
Igen. A hotspot **Tartalom** fülén az **Icon** gombbal tölts fel SVG-képet.

**Adhatok eszköztippet egy egész oszlopra a Custom Selector segítségével?**
Nem, ez jelenleg nem érhető el.

**Működik az eszköztipp dinamikus tartalommal (például JetEngine egyéni tartalomtípusokkal)?**
Igen.

**Hogyan érhetem el, hogy az eszköztipp egy egész konténer fölé húzáskor is megjelenjen?**
Az **Append tooltip** listában válaszd ki a megfelelő beállítást.

**Megadható egy kép adott pontján felugró szövegdoboz?**
Ez jelenleg nem érhető el. Az eszköztipp helyzetét azonban kezdetre, közepére vagy végére állíthatod (például **Top Start**). Képre jelölőpontokat a **Hotspotok** widgettel tehetsz.

**Beállítható, hogy az eszköztipp szélessége automatikusan igazodjon a dinamikus tartalomhoz?**
Ez jelenleg nem érhető el.