# Eszköztipp: szöveges és képes súgóbuborék bármely elemhez

> Az Eszköztipp kiterjesztés beállításai, szöveges és képes eszköztipp készítése, a buborék viselkedése és megjelenése.

Az eszköztipp egy kis felugró buborék, amely akkor nyílik, ha a látogató az elem fölé viszi az egeret (vagy rákattint). Magyarázatot, árjegyzetet vagy termékelőnézetet tehetsz bele anélkül, hogy helyet foglalna az oldalon. Az **Eszköztipp** kiterjesztés minden Elementor widgethez ad egy **Eszköztipp** szakaszt a **Haladó** fülön, az Elementor saját widgetjeihez is (például a Címsorhoz).

## Előkészületek

- A kiterjesztés a bővítmény teljes (Pro) változatában érhető el. Az ingyenes bővítménnyel az oldalba semmilyen eszköztipp-kód nem kerül.
- Kapcsold be a **The Plus Addons → Extensions** oldalon a **Tooltip** kapcsolót. A kiterjesztések között találod (keresd a nevét), a widgetek között nem.
- Más nem kell hozzá: nincs külön bővítmény vagy bejegyzéstípus.
- A buborék csak a nyilvános oldalon jelenik meg, a szerkesztő vásznán nem.

## Az eszköztipp bekapcsolása

1. Jelöld ki a widgetet.
2. Nyisd meg a **Haladó → Eszköztipp** szakaszt.
3. Állítsd az **Eszköztipp** kapcsolót **Igen** állásba. A szakasz többi része csak ezután jelenik meg.

![Az Eszköztipp szakasz a Tartalom fülön, szöveges tartalommal](./kepek/kiterjesztesek-1-tooltip-panel-tartalom.webp)

*Az Eszköztipp szakasz a Tartalom fülön, szöveges tartalommal* (https://minta-bolt.hu/wp-admin/post.php?post=360&action=elementor)

A képen a **Tartalom** fül látszik a **Szöveges tartalom** típussal: **Leírás** mező, **Szöveg igazítása**, **Tipográfia** és **Szöveg színe**.

## A Tartalom fül

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Tartalomtípus** | A szerkesztőt választja. **Szöveges tartalom**: egyszerű szövegmező. **WYSIWYG-szerkesztő**: teljes WordPress-szerkesztő, amellyel képet, hivatkozást és formázást tehetsz a buborékba. | Szöveges tartalom |
| **Leírás** | A buborék szövege. Csak **Szöveges tartalom** esetén látszik. | Helyőrző szöveg |
| **Eszköztipp tartalma** | A formázott szövegű buborékszöveg. Csak **WYSIWYG-szerkesztő** esetén látszik. | Helyőrző szöveg |
| **Szöveg igazítása** | A szöveg igazítása a buborékban. Csak szöveges tartalomnál. | Középre |
| **Tipográfia** | A buborékszöveg betűbeállításai. | A téma alapértelmezése |
| **Szöveg színe** | A buborékszöveg színe. | Nincs beállítva |

## A Stílus fül

A **Stílus** fülön két előugró panel van: **Buboréksúgó opciói** (viselkedés és hely) és **Stílusopciók** (a doboz kinézete). Kattints a tollra mutató ikonra a címke mellett a megnyitásukhoz. A panelek beállításai csak akkor mentődnek, ha megnyitottad a panelt, és változtattál valamit benne.

![A Stílus fül két előugró paneljének gombjai](./kepek/kiterjesztesek-1-tooltip-panel-stilus.webp)

*A Stílus fül két előugró paneljének gombjai* (https://minta-bolt.hu/wp-admin/post.php?post=360&action=elementor)

### Buboréksúgó opciói

![A Buboréksúgó opciói panel megnyitva](./kepek/kiterjesztesek-1-tooltip-panel-buborek.webp)

*A Buboréksúgó opciói panel megnyitva* (https://minta-bolt.hu/wp-admin/post.php?post=360&action=elementor)

A képen a panel összes beállítása látszik az alapértékekkel.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Interaktív súgóbuborékok** | Engedi, hogy a látogató az egérrel a buborékba lépjen. Ez kell, ha hivatkozás vagy gomb van a buborékban. | Bekapcsolva |
| **Pozíció** | Hol nyíljon a buborék: **Bal**, **Jobb**, **Felül**, **Fent, a kezdő pozícióban**, **Fent, a záró pozícióban** vagy **Alul**. | Felül |
| **Sablon** | A beépített színséma: **Sötét**, **Világos** vagy **Áttetsző**. | Sötét |
| **Szélesség** | A buborék szélessége, 50 és 700 px között vagy 0 és 100 em között. | 200 px |
| **Eltolás** | Oldalirányú eltolás a horgonyponttól. | 0 |
| **Távolság** | A widgettől való távolság. | 0 |
| **Nyilak** | A buborék kis nyila: **Nincs**, **Alapértelmezett** vagy **Kerek**. | Alapértelmezett |
| **Nyíl színe** | A nyíl színe. | Nincs beállítva |
| **Eseményindító** | Mi nyitja a buborékot: **Rámutatás** vagy **Kattintás**. | Rámutatás |
| **Animáció** | **Eltolás távolabbra**, **Eltolás közelebb**, **Áttűnés**, **Méretezés** vagy **Perspektíva**. | Eltolás közelebb |
| **Beúszás időtartama** | A nyitó animáció hossza ezredmásodpercben. | 250 |
| **Kiúszás időtartama** | A záró animáció hossza ezredmásodpercben. | 200 |

### Stílusopciók

![A Stílusopciók panel megnyitva](./kepek/kiterjesztesek-1-tooltip-panel-stilusopciok.webp)

*A Stílusopciók panel megnyitva* (https://minta-bolt.hu/wp-admin/post.php?post=360&action=elementor)

A buborék dobozát itt alakíthatod: **Padding**, **Háttér típusa** (szín vagy színátmenet), **Szegély típusa**, **Keretsugár** és **Dobozárnyék** (kapcsolóval).

## Szöveges eszköztipp

A szöveges eszköztipp a leggyorsabb mód arra, hogy zsúfoltság nélkül magyarázz el valamit: árjegyzet, mezősúgó vagy rövid meghatározás.

1. Jelöld ki a widgetet, és nyisd meg a **Haladó → Eszköztipp** szakaszt.
2. Állítsd az **Eszköztipp** kapcsolót **Igen** állásba.
3. A **Tartalom** fülön hagyd a **Tartalomtípus** értékét **Szöveges tartalom** állapotban.
4. Írd be az üzenetet a **Leírás** mezőbe. Tartsd egy-két sorosra, mert a buborék alapból 200 px széles.

Ennyi elég egy működő eszköztipphez. A többi beállítás (**Szöveg igazítása**, **Tipográfia**, **Szöveg színe**) választható. A **Szöveg igazítása** akkor érdemes módosítani, ha a szöveg több soros lesz. A **Szöveg színét** akkor állítsd, ha az alapértelmezett szín nem olvasható jól a buborék hátterén.

A **Leírás** helyőrző szöveggel érkezik, cseréld le a sajátodra.

![Szöveges eszköztipp nyitva a Címsor widget fölött a nyilvános oldalon](./kepek/kiterjesztesek-1-tooltip-elol.webp)

*Szöveges eszköztipp nyitva a Címsor widget fölött a nyilvános oldalon* (https://minta-bolt.hu/kx1-tooltip/)

A képen a „Éves előfizetés” címsor fölé vitt egérrel nyílt meg a sötét buborék a szöveggel: „Évente egyszer fizetendő. Bármikor lemondható.” A buborék a widget fölött nyílik, alatta a kis nyíl mutat a widgetre.

## Képes eszköztipp

Az eszköztippbe bármi kerülhet, amit a WordPress-szerkesztő elő tud állítani: kép, kép szöveggel, hivatkozás, rövid lista. Például terméket mutathat a név mellett, csapatfotót a név mellett, vagy képernyőképet a funkció mellett.

1. Készíts elő egy képet a médiatárban.
2. Jelöld ki a widgetet, és nyisd meg a **Haladó → Eszköztipp** szakaszt.
3. Állítsd az **Eszköztipp** kapcsolót **Igen** állásba.
4. A **Tartalom** fülön a **Tartalomtípust** állítsd **WYSIWYG-szerkesztő** értékre. A **Leírás** mező helyett az **Eszköztipp tartalma** szerkesztő jelenik meg.
5. Töröld a helyőrző szöveget, és a **Média hozzáadása** gombbal szúrd be a képet a médiatárból.

Tartsd kicsin a képet. A buborék alapból 200 px széles, a kép pedig akkora lesz, amekkorára állítod: egy teljes méretű fotó kilóg az elrendezésből, amíg meg nem adsz neki szélességet, vagy nem növeled a **Szélesség** értékét a **Buboréksúgó opciói** panelben (700 px-ig).

Ha az eszköztipp hivatkozást vagy gombot tartalmaz, hagyd bekapcsolva az **Interaktív súgóbuborékok** beállítást, hogy az egér be tudjon lépni a buborékba anélkül, hogy az bezárulna.

## YouTube-videó az eszköztippben

Az eszköztippbe beágyazott YouTube-videó is kerülhet: a látogató az elem fölé viszi az egeret, és a buborékban lejátszhatja a videót.

1. Jelöld ki a widgetet, nyisd meg a **Haladó → Eszköztipp** szakaszt, és állítsd az **Eszköztipp** kapcsolót **Igen** állásba.
2. A **Tartalom** fülön a **Tartalomtípust** hagyd **Szöveges tartalom** értéken, vagy válaszd a **WYSIWYG-szerkesztő** értéket, ahogy a beágyazáshoz kényelmesebb.
3. Illeszd be a videó beágyazási kódját a **Leírás** mezőbe (WYSIWYG-nél az **Eszköztipp tartalma** szerkesztőbe, a **Kód** nézetben). A kódot a YouTube-on a videó **Megosztás** gombja, majd a **Beágyazás** pontja adja.
4. Nyisd meg a **Stílus** fület, a **Buboréksúgó opciói** panelt, és kapcsold be az **Interaktív súgóbuborékok** beállítást. Ez nélkül a videót nem tudod elindítani a buborékban.
5. Ha a videó nem fér el, emeld meg a **Szélesség** értékét ugyanebben a panelben (700 px-ig).
6. Mentsd az oldalt, és próbáld ki a nyilvános oldalon: a widget fölé víve megjelenik a videó a buborékban.

A buborék megjelenését (háttér, szegély, árnyék) ugyanúgy a **Stílus** fülön állítod, mint a szöveges eszköztippnél.

## Viselkedés

- Alapértékekkel a widget fölé vitt egér sötét buborékot nyit a widget fölött. A **Pozíció** értéke **Alul** a buborékot a widget alá viszi.
- A **Sablon** értéke **Világos** fehér hátterű buborékot ad.
- Ha az **Eseményindító** értéke **Kattintás**, a rávitt egér már nem nyitja a buborékot, csak a kattintás.
- Az **Eszköztipp** szakasz minden Elementor widgeten megjelenik, nem csak a The Plus Addons widgetjein.

## Korlátozások

- A kiterjesztés csak a bővítmény teljes (Pro) változatában érhető el, ingyenes tartalék nincs.
- A **Pozíció** nem kínál „Lent, a kezdő pozícióban” és „Lent, a záró pozícióban” értéket.
- Az eszköztipp alapból egérrel működik, érintőképernyőn ezért állítsd az **Eseményindító** értékét **Kattintás** értékre.
- Egyes The Plus Addons widgetek (például a **Style Lists** és a **Cascading Image**) saját **Eszköztipp** szakaszt tartalmaznak az egyes elemekhez. Az külön funkció, még ha a beállítások nevei egyeznek is.
- **Szöveges tartalom** esetén a **Szöveg igazítása** beállítás látszik, **WYSIWYG-szerkesztő** esetén nem. A buborékon belüli igazítást ilyenkor a szerkesztő saját formázásával oldd meg.
- A képes eszköztipphez nincs külön képméret-beállítás: a képet beszúráskor méretezd, vagy emeld a buborék szélességét.

## Hibaelhárítás

**Nincs Eszköztipp szakasz a Haladó fülön.** A kiterjesztés ki van kapcsolva. Kapcsold be a **The Plus Addons → Extensions** oldalon a **Tooltip** kapcsolót, és töltsd újra a szerkesztőt. A widgetek között hiába keresed, mert nem widget.

**Csak az Eszköztipp kapcsolót látom, mást nem.** A szakasz többi része rejtve van, amíg az **Eszköztipp** nincs **Igen** állásban.

**A nyilvános oldalon rámutatásra nem történik semmi.** Ellenőrizd, hogy az **Eszköztipp** **Igen**, és hogy az **Eseményindító** még **Rámutatás**. Ha **Kattintás**, a rámutatás szándékosan nem csinál semmit.

**A buborék megnyílik, de a stílusom nem látszik.** Nyisd meg a **Buboréksúgó opciói** vagy a **Stílusopciók** panelt, és változtass meg benne egy értéket: az Elementor csak a megnyitott panel beállításait menti.

**A buborékban lévő hivatkozásra nem tudok kattintani.** Kapcsold be az **Interaktív súgóbuborékok** beállítást.

**A buborék helyőrző szöveget mutat.** A **Leírás** helyőrző szöveggel indul. Cseréld le a sajátodra.

**A buborékban a kép URL-je jelenik meg szövegként.** A képet szövegként illesztetted be. Használd a **Média hozzáadása** gombot, vagy válts a szerkesztő **Kód** nézetére, és ott illessz be valódi kép elemet.

**Nem találom a Média hozzáadása gombot.** Az **Eszköztipp tartalma** szerkesztőhöz tartozik, amely csak **WYSIWYG-szerkesztő** tartalomtípusnál jelenik meg. **Szöveges tartalom** esetén sima szövegmezőt kapsz.

**A kép túl nagy.** Adj szélességet a képnek beszúráskor, vagy emeld a **Szélesség** értékét a **Buboréksúgó opciói** panelben (700 px-ig).