# Hotspot widget: pinek képen, szöveges és képes jelölő, kattintásra nyíló tooltip

> Pinek elhelyezése egy képen, a jelölő típusai (ikon, kép, szöveg, Lottie) és a buborék megnyitása kattintásra.

A **Hotspot** widget egyetlen képre tetszőleges számú jelölőt (pint) tesz. A jelölőre rámutatva rövid szöveg, egy kis buborék (tooltip) jelenik meg: egy kabát gallérján, egy szoba lámpáján vagy egy ábra egy részén. A jelölők helyét százalékban adod meg, ezért a kép átméretezésekor is a helyükön maradnak.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Hotspot** szóra, és kapcsold be a kapcsolóját. A widget a Pro kiadás része. Ha csak az ingyenes bővítmény aktív, az oldalon nem jelenik meg semmi, még helykitöltő sem.

## Jelölő felvétele a képre

1. Add az oldalhoz a **Hotspot** widgetet.
2. A **Tartalom → Tartalom** szakaszban a **Hotspot kép** mezőnél válaszd ki a képet. A **Képfelbontás** maradjon **Teljes**, hacsak nem kell kisebb fájl.
3. Nyisd meg a **Több hotspotjelölő hozzáadása** lista első sorát. A **Cím** csak a sor neve a panelen, hogy megkülönböztesd a jelölőket. A látogató nem látja.
4. A **Jelölő típusa** mezőt hagyd **Ikon**-on és válassz ikont, vagy válts **Kép**, **Szöveg** vagy **Lottie** típusra.
5. A **Jelölő pozíciója → Asztali gép** csoportban a **Bal (automatikus / %)** és a **Fent (automatikus / %)** kapcsolóval, majd a csúszkákkal told a jelölőt a kívánt helyre.
6. A **Jelölő tartalma** alatt a **Leírás** mezőbe írd a buborék szövegét.
7. Újabb jelölőhöz adj új sort a listához.

![A Hotspot widget két jelölővel egy képen](./kepek/dobozok-gombok-4-hotspot-alap.webp)

*A Hotspot widget két jelölővel egy képen* (https://minta-bolt.hu/tp-hotspot-alap/)

A képen a két jelölő látszik a megadott helyén: a bal oldali szöveges, a jobb oldali képes.

![A jelölő buborékja megnyitva](./kepek/dobozok-gombok-4-hotspot-tooltip.webp)

*A jelölő buborékja megnyitva* (https://minta-bolt.hu/tp-hotspot-alap/)

Alapértelmezésben a buborék rámutatáskor nyílik meg, a jelölő fölött, sötét háttérrel, benne a **Leírás** szövegével.

### Pozíció és beállítások

Minden jelölőnek külön **Asztali gép**, **Tablet** és **Mobil** csoportja van. A tablet és a mobil csak akkor él, ha az adott eszköznél bekapcsolod a **Reszponzív értékek** kapcsolót. Különben mindenhol az asztali pozíció érvényes.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Jelölő típusa** | A jelölő típusa: **Ikon**, **Kép**, **Szöveg** vagy **Lottie**. | Ikon |
| **Bal (automatikus / %)** | Bekapcsolva a jelölő a bal szélhez képest, százalékban helyezkedik el. | Be, 40% |
| **Fent (automatikus / %)** | Bekapcsolva a jelölő a felső szélhez képest, százalékban helyezkedik el. | Be |
| **Folyamatos hatás** | A jelölő folyamatos animációja: **Pulzálás**, **Lebegtetés**, **Dobálás**, **Normál csepphullámok**, **Folyamatos csepphullámok** vagy **Rámutatáskor megjelenő csepphullámok**. | Normál csepphullámok |
| **Képfelbontás** | A kép mérete a regisztrált képméretek közül. | Teljes |

### Hivatkozás a jelölőn

A jelölő **Link** kapcsolóját bekapcsolva az egész jelölő kattintható, és a megadott címre visz.

### Tudnivalók

- A jelölők helye a kép százalékában értendő, ezért a kép átméretezésekor is a megfelelő ponton maradnak.
- A buborék szövege a **Leírás**. A **Cím** csak a lista soránál jelenik meg a szerkesztőben.
- A jelölők elhelyezése csúszkákkal történik, a vásznon nincs húzással való elhelyezés.
- A widget nem tölt be ikonbetűkészletet. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, az **Ikon** típusú jelölő üresen jelenhet meg. Ilyenkor használj **Kép** vagy **Szöveg** típust, vagy gondoskodj róla, hogy az oldalon egy másik elem betöltse a Font Awesome-ot.

## Szöveges jelölő

Ha a jelölőnek maga is információt kell hordoznia (sorszám, ár, rövid felirat), a **Jelölő típusa** legyen **Szöveg**.

1. Nyisd meg a jelölő sorát a **Több hotspotjelölő hozzáadása** listában.
2. A **Jelölő típusa** értéke legyen **Szöveg**.
3. A **Jelölő szövege** mezőbe írd a feliratot. Alapértéke `Theplus`, ezt cseréld le.
4. Tartsd rövidre: egy-két szó vagy egy szám. A jelölő a szöveghez igazodva nő.
5. A megjelenést a **Stílus → Jelölő szövege** szakaszban állíthatod.

A közzétett oldalon a jelölő a beírt szöveget mutatja, ikon nélkül, és rámutatáskor ugyanúgy megnyílik a buborék, mint az ikonos jelölőnél. A fenti képen a bal oldali jelölő ilyen: **AKCIÓ** felirat.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Jelölő típusa** | **Ikon**, **Kép**, **Szöveg** vagy **Lottie**. | Ikon |
| **Jelölő szövege** | A jelölőn megjelenő szöveg. | Theplus |
| **Cím** | A sor neve a panelen, a látogató nem látja. | üres |
| **Leírás** | A buborék szövege. | Luctus nec ullamcorper mattis |

Tudnivalók:

- A **Jelölő szövege** mező csak akkor látszik, ha a **Jelölő típusa** értéke **Szöveg**.
- Ne keverd a **Jelölő szövege** mezőt a **Cím**-mel: a **Cím** a szerkesztő neve a sornak, a **Jelölő szövege** az, amit a látogató a jelölőn olvas.
- A szöveges jelölőhöz nem kell ikonbetűkészlet, ezért ez a legbiztosabb típus, ha az ikonok üresen jelennének meg.
- Egysoros szöveg fér bele: nincs benne formázás vagy sortörés. A hosszú felirat kiszélesíti a jelölőt, és ráérhet a szomszédos jelölőre. Ilyenkor a végleges szöveg beírása után állítsd be a **Jelölő pozíciója** értékeit.
- Eltérő felirattal a jelölők eltérő szélességűek.

### Hibaelhárítás: szöveges jelölő

- **A jelölő még mindig „Theplus”:** ez a **Jelölő szövege** gyári értéke, írd át.
- **Nem találom a Jelölő szövege mezőt:** előbb állítsd a **Jelölő típusa** értékét **Szöveg**-re, a többi típusnál a mező rejtve van.
- **Két jelölő egymásra lóg:** told őket szét a **Bal (automatikus / %)** és a **Fent (automatikus / %)** értékekkel a **Jelölő pozíciója** alatt.

## Képes jelölő

Egy kis fotó, termékminiatűr vagy márkajel gyakran jobban működik az általános ikonnál.

1. Nyisd meg a jelölő sorát a **Több hotspotjelölő hozzáadása** listában.
2. A **Jelölő típusa** értéke legyen **Kép**.
3. A **Jelölő képe** mezőben válaszd ki a képet.
4. Ha akarod, a **Jelölő képe rámutatáskor** mezőben adj meg egy második képet, amely rámutatáskor jelenik meg.
5. A méretét a **Stílus → Jelölő képe** szakaszban a **Jelölőkép mérete** és a **Jelölőkép szélessége** értékkel állítsd.

A közzétett oldalon a jelölő a választott kép lesz: ikon helyett képelem kerül az oldalra. A buborék ugyanúgy megnyílik, mint az ikonos jelölőnél. A jobb oldali jelölő a fenti képen ilyen.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Jelölő típusa** | **Ikon**, **Kép**, **Szöveg** vagy **Lottie**. | Ikon |
| **Jelölő képe** | A jelölőként használt kép. | üres |
| **Jelölő képe rámutatáskor** | A kép, amely rámutatáskor jelenik meg. | üres |
| **Jelölőkép mérete** | A jelölő mérete a **Stílus** lapon. | a téma alapértéke |
| **Jelölőkép szélessége** | A jelölő szélessége a **Stílus** lapon. | a téma alapértéke |

Tudnivalók:

- A **Jelölő képe** és a **Jelölő képe rámutatáskor** csak **Kép** típusnál látszik. Ha visszaváltasz másik típusra, a beállítások megmaradnak, csak rejtve vannak.
- A pozíció, a buborék és a hivatkozás minden típusnál ugyanúgy működik, csak a jelölő változik.
- A képes jelölőhöz nem kell ikonbetűkészlet.
- A **Jelölő típusa** jelölőnként állítható, így egy képen keverheted a képes és az ikonos jelölőket.
- Használj kicsi, négyzethez közeli képet: a nagy kép a **Stílus** lapon kicsinyíthető, de a fájlt a böngészőnek így is le kell töltenie.

Korlátok:

- A jelölő képéhez nem adható külön alternatív szöveg.
- A nagyon széles vagy magas kép torznak hat jelölőként: a **Stílus** lap átméretezi, de nem vágja.
- Érintőképernyőn nincs rámutatás, ezért ott a látogató csak a **Jelölő képe** képet látja, a rámutatáskori képet nem.

### Hibaelhárítás: képes jelölő

- **Nem látom a Jelölő képe mezőt:** a **Jelölő típusa** még **Ikon**, **Szöveg** vagy **Lottie**. Állítsd **Kép**-re.
- **A jelölő túl nagy:** használd a **Jelölőkép mérete** és a **Jelölőkép szélessége** értéket a **Stílus → Jelölő képe** szakaszban.

## Lottie-animáció jelölőként

A jelölő lehet mozgó Lottie-animáció is, ami figyelemfelkeltőbb egy egyszerű pontnál. Ehhez a Lottie-fájl JSON-címe kell.

A cím beszerzése:

1. Jelentkezz be a LottieFiles oldalán (a regisztráció ingyenes), és a kiemelt, ingyenes animációk közül válassz egyet.
2. Kattints az animációra, majd a felugró ablakban a munkaterületre mentés gombra, hogy az animáció új ablakban, a szerkesztőben megnyíljon.
3. A jobb oldali panelen kapcsold be az asset-link (elérési hivatkozás) kapcsolót.
4. Másold ki az URL-t az **Asset link** mezőből.

A jelölő beállítása:

1. Add az oldalhoz a **Hotspot** widgetet, és a **Hotspot kép** mezőben válaszd ki a képet.
2. Nyisd meg annak a listasornak a beállításait, amelyiken a Lottie-t használnád, és a **Jelölő típusa** listából válaszd a **Lottie** értéket.
3. A **Lottie URL** mezőbe illeszd be a kimásolt címet.
4. A **Jelölő tartalma** alatt írd meg a buborék szövegét.

A kép fölött ezután az animáció látszik jelölőként. A méretét és a lejátszását a **Stílus** fül **Lottie** szakaszában állíthatod. A Lottie csak a Hotspot widget Pro kiadásával érhető el.

## Buborék megnyitása kattintásra

Az asztali gépen a rámutatás jó, telefonon viszont nincs rámutatás. Ha a jelölő kattintásra nyílik meg, mindenhol ugyanúgy működik.

1. Válaszd ki a **Hotspot** widgetet, és nyisd meg a módosítandó jelölőt a **Több hotspotjelölő hozzáadása** listában.
2. A soron belül válts a **Stílus** lapra.
3. Kattints a **Buboréksúgó opciói** feliratra a csoport megnyitásához.
4. Az **Eseményindító** értéke legyen **Kattintás**.
5. Ismételd meg minden olyan jelölőnél, amelyiknél kell. Az **Eseményindító** jelölőnként állítható, nem az egész widgetre.

![A jelölő buborékja kattintás után](./kepek/dobozok-gombok-4-hotspot-kattintas.webp)

*A jelölő buborékja kattintás után* (https://minta-bolt.hu/tp-hotspot-kattintas/)

A közzétett oldalon kipróbálva a **Rámutatás** beállítással a jelölőre mutatás megnyitja a buborékot. A **Kattintás** beállítással a rámutatás nem nyit meg semmit, a buborék csak a jelölőre kattintás után jelenik meg.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Eseményindító** | **Rámutatás** vagy **Kattintás**: ez nyitja meg a buborékot. | Rámutatás |
| **Pozíció** | A buborék helye: **Bal**, **Jobb**, **Felül**, **Fent, a kezdő pozícióban**, **Fent, a záró pozícióban** vagy **Alul**. | Felül |
| **Sablon** | A buborék színváltozata: **Sötét**, **Világos** vagy **Áttetsző**. | Sötét |
| **Interaktív súgóbuborékok** | A látogató a buborékba is beléphet az egérrel, anélkül hogy bezárulna. | Bekapcsolva |
| **Animáció** | Hogyan jelenik meg a buborék. | Eltolás közelebb |

Tudnivalók:

- Az **Eseményindító** a jelölő sorának **Stílus** lapján, a **Buboréksúgó opciói** alatt van, nem a **Tartalom** lapon, ahol a szöveg.
- A **Buboréksúgó opciói** ugyanaz a beállításcsoport, amelyet a bővítmény más buborékjainál is használsz.
- Egy képen keverheted a rámutatásra és a kattintásra nyíló jelölőket.
- Ha az **Ikon** típusú jelölő üresen jelenik meg (nincs betöltött Font Awesome), a buborék még megnyílik, de nincs mire kattintani. Használj **Szöveg** vagy **Kép** típust.

### Hibaelhárítás: buborék

- **A buborék még mindig rámutatásra nyílik:** az **Eseményindító** csak az adott jelölőre vonatkozik. Nyisd meg a **Több hotspotjelölő hozzáadása** minden sorát, és nézd meg a **Stílus** lap **Buboréksúgó opciói** csoportját.
- **Nem találom a Buboréksúgó opciói csoportot:** a jelölő sorának **Stílus** lapján van, nem a widget **Stílus** lapján és nem a sor **Tartalom** lapján.
- **Semmi sem nyílik meg:** nézd meg, hogy a **Jelölő tartalma** alatti **Leírás** mezőben van-e szöveg. Üres leírásnál nincs mit megjeleníteni.