# Hotspot widget

> Jelölők, eszköztippek és hotspot-túra egy képen: beállítások, stílus, hibaelhárítás.

A **Hotspot** widget egy kép adott pontjait jelölőkkel emeli ki, a jelölőkhöz eszköztippben tartozhat leírás. A főbb lehetőségek:

- háttérkép, állítható átlátszósággal;
- háromféle jelölő: ikon, szöveg vagy kép;
- minden jelölőhöz külön hivatkozás;
- közös és jelölőnkénti stílus, izzó hatással;
- az eszköztipp pozíciója, nyila és animációja állítható;
- hotspot-túra, amely végigvezeti a látogatót a jelölőkön.

## Kép

A **Kép** szakaszban választod ki a háttérképet és a méretét. Az átlátszóságát a **Stílus** fül **Kép** szakaszában állítod.

## Jelölők

A **Jelölők** szakaszban tetszőleges számú jelölőt vehetsz fel az **Elem hozzáadása** gombbal.

![A Jelölők szakasz két jelölővel](./kepek/tartalom-hotspot-jelolok.webp)

*A Jelölők szakasz két jelölővel* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen a lista két jelölője látszik: **Bejárat** és **Pénztár**.

Minden jelölőnek három füle van:

| Fül | Beállítások |
|---|---|
| **Általános** | **Jelölő típusa** (**Ikon**, szöveg vagy kép), **Cím**, a jelölő ikonja vagy képe, **Pozíció**: **Vízszintes pozíció (%)** és **Függőleges pozíció (%)**. |
| **Tartalom** | Az eszköztipp szövege (szövegszerkesztővel) és a **Jelölő hivatkozása**. |
| **Stílus** | Egyedi stílus (lásd lent). |

![Egy kinyitott jelölő Általános füle](./kepek/tartalom-hotspot-jelolo-szerkesztes.webp)

*Egy kinyitott jelölő Általános füle* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen a **Bejárat** jelölő pozíciója látszik százalékban.

## Jelölők stílusa

A jelölők közös stílusa a **Stílus** fülön állítható, a kiválasztott jelölőtípushoz tartozó beállításokkal. Az izzó hatás is itt van. Ha egy jelölőt ki szeretnél emelni, a **Tartalom** fülön a **Jelölők** szakaszban nyisd ki a jelölőt, és a **Stílus** fülén a közös beállítások felülírhatók.

## Eszköztipp

Az eszköztipp egy kis ablak, ami a jelölőre mutatva vagy kattintva jelenik meg. A szövege a jelölő **Tartalom** fülén van.

![Az Eszköztipp szakasz](./kepek/tartalom-hotspot-eszkoztipp.webp)

*Az Eszköztipp szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen az eszköztipp beállításai láthatók, alul a **Speciális beállítások** kapcsolóval.

| Beállítás | Mit csinál |
|---|---|
| **Eszköztipp bekapcsolása** | Bekapcsolja az eszköztippeket. |
| **Pozíció** | Az eszköztipp helye a jelölőhöz képest. |
| **Megjelenítés helye** | Rámutatásra vagy kattintásra jelenik meg. |
| **Nyíl** | A nyíl helye az eszköztipp dobozán. |
| **Távolság** | A jelölő és az eszköztipp távolsága. |
| **Animáció típusa** | Az eszköztipp doboz animációja. |

A **Speciális beállítások** kapcsolóval további mezők jelennek meg: az animáció időtartama, a legnagyobb magasság és a **Z-index**.

### Legnagyobb magasság

Hosszú tartalomnál az eszköztipp doboza kinyúlhat, akár a képernyőn kívülre is. A legnagyobb magassággal korlátozod a doboz magasságát: ennél hosszabb tartalomnál függőleges görgetősáv jelenik meg benne.

### Z-index

Ha az eszköztipp egy másik szekció mögé kerül, emeld a **Z-index** értékét.

## Hotspot-túra

A túra a jelölők létrehozási sorrendjében végigviszi a látogatót: az első jelölőtől indulva egy megadott időköz után sorban megjelenik a többi eszköztipp. A túra az eszköztippen jelenik meg, ezért csak bekapcsolt eszköztippnél működik. Az eszköztippen előző és következő léptető hivatkozás is van.

![A Hotspot-túra szakasz bekapcsolt túrával](./kepek/tartalom-hotspot-tura.webp)

*A Hotspot-túra szakasz bekapcsolt túrával* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen a túra bekapcsolva látszik, a szerkesztőben a **Bemutató indítása** átfedő gombbal.

| Beállítás | Mit csinál |
|---|---|
| **Túra engedélyezése** | Bekapcsolja a túrát. |
| **Túra ismétlése** | Az utolsó jelölő után vissza lehet lépni az elsőre. |
| **Automatikus lejátszás** | A túra magától végigmegy a jelölőkön. |
| **Eszköztippek közötti időköz (mp)** | Ennyi idő múlva jelenik meg a következő eszköztipp. |
| **Túra elindítása** | Gombra kattintáskor indul, vagy amikor a hotspot a látómezőbe kerül. |
| **Inaktív jelölők elrejtése** | Elrejti azokat a jelölőket, amelyek épp nem aktívak. |
| **Átfedő gomb** | Gombra kattintásos indításnál az indító gomb szövege, mérete és helye. A túra addig megy automatikusan, amíg a látogató a túra befejezését nem választja. |

## Szűrők fejlesztőknek

A hotspot-túra szövegeit és az eszköztipp szélességét PHP-szűrőkkel módosíthatod, például a sablonod `functions.php` fájljában. Mindegyik szűrő két paramétert kap: az értéket és a widget beállításait.

| Szűrő | Mit módosít |
|---|---|
| `uael_hotspot_next_label` | A túra „Következő” gombjának szövege. |
| `uael_hotspot_previous_label` | A túra „Előző” gombjának szövege. |
| `uael_hotspot_endtour_label` | A „Túra befejezése” szöveg. |
| `uael_tooltip_maxwidth` | Az eszköztipp legnagyobb szélessége. |
| `uael_tooltip_minwidth` | Az eszköztipp legkisebb szélessége. |

```php
add_filter( 'uael_hotspot_next_label', function( $next_label, $settings ) {
	return 'Tovább';
}, 10, 2 );
```

## Hibaelhárítás: a jelölő hivatkozása nem nyílik meg

Ha egy jelölőhöz hivatkozást adtál, de nem lehet rákattintani, ennek két oka lehet:

- Az eszköztipp **Megjelenítés helye** beállítása kattintás. Ilyenkor a kattintás az eszköztippet nyitja meg, a hivatkozás nem működik. A hivatkozás csak rámutatásos eszköztippnél használható.
- Be van kapcsolva a hotspot-túra. Ilyenkor a jelölők hivatkozása szintén nem működik.