# Egyedi eszköztippek táblázatban, fülekben és harmonikában

> Eszköztipp (felugró súgó) hozzáadása a Táblázat, a Fülek és a Klasszikus harmonika widget szövegeihez és az űrlapmezők címkéihez.

Az eszköztipp egy rövid szöveg, amely egy elem fölé mutatva (mobilon rákoppintva) jelenik meg. Ez a fejezet azt mutatja meg, hogyan tehetsz eszköztippet egy widgeten **belüli** szövegbe, például egy fül vagy egy táblázatfejléc címkéjébe. Egész widgetekre vagy blokkokra a JetTricks bővítmény tud eszköztippet adni; ott a pozíció és az animáció is állítható.

## Követelmények

- Elementor (az ingyenes változat is elég).
- A JetElements, a JetTabs vagy a JetFormBuilder bővítmény aktív, a szükséges widget bekapcsolva.

## 1. módszer: HTML-attribútum (csak asztali gépen)

Ez a legegyszerűbb mód. Az eszköztipp asztali gépen az egérmutató fölé érve látszik, mobilon nem.

1. Add hozzá a **Fülek** widgetet az oldalhoz.
2. Nyisd ki a **Tételek** beállítást.
3. A fül **Címke** mezőjébe írd be a következő HTML-t:

```html
<i title="Eszköztipp szövege" class="fas fa-info-circle"></i>
```

A `title` értéke az a szöveg, amelyet az eszköztipp mutat. Például:

```html
<i title="Csak olvasd el!" class="fas fa-info-circle"></i>
```

## 2. módszer: HTML asztali gépre és mobilra

Ez a megoldás asztali gépen az egér fölé érve vagy kattintásra, mobilon koppintásra mutatja a szöveget. Érdemes info ikont vagy rövid jelzést tenni mellé: mobilon koppintani kell, ezért látszania kell, hogy az elem interaktív.

### Beágyazott HTML a widget címébe

A következő HTML a **Fülek** widget és a **Klasszikus harmonika** widget **Cím** mezőjébe írható:

```html
Fül 1: &nbsp; <span class="tooltip" data-tip="Az eszköztipp szövege">   <i class="fas fa-info-circle"></i> </span>
```

- `Fül 1`: az adott fül neve.
- `&nbsp;`: szóköz, annyiszor írhatod, ahányszor kell.
- `Az eszköztipp szövege`: a megjelenő szöveg.
- `<i class="fas fa-info-circle"></i>`: a Font Awesome 4 „Info” ikonja.

Az Elementor szerkesztő beállításai között (**Elementor → Beállítások → Haladó**) a **Font Awesome 4 támogatás betöltése** legyen **Igen**, hogy a Font Awesome 4 ikonok a Font Awesome 5 könyvtár mellett is helyesen jelenjenek meg.

Ikon helyett bármilyen szöveges jel is használható. Ha az ikont vagy jelet kicsit följebb szeretnéd a sorhoz képest, tedd `<sup></sup>` közé:

```html
Fül 1 &nbsp; <span class="tooltip" data-tip="Az eszköztipp szövege"> <sup><i class="fas fa-info-circle"></i></sup> </span>
```

### CSS és JavaScript hozzáadása

Ehhez a módszerhez egyedi CSS és JavaScript kell. Beilleszthető az Elementor Pro egyedi kódjaként (az Elementor **Egyedi elemek → Kód** részén), vagy egy kódrészleteket kezelő bővítménnyel (például a Post Snippets ingyenes változata is kezeli a JavaScriptet). A CSS-t és a JavaScriptet külön kell beilleszteni. Beillesztés után mentsd a kódot.

Ha a **Táblázat** widget valamelyik sorába teszel eszköztippet, ezt a CSS-t is add hozzá, különben a táblázat levágja a felugró szöveget:

```css
.jet-table td,
.jet-table tr,
.jet-table tbody,
.jet-table {
  overflow: visible !important;
}
```

### Eszköztipp, ami mindig felül van

Ha az eszköztippet más elemek eltakarhatják (mert szülő tárolók fölé nyúlnak), két megoldás van: a szülő tárolók **Z-index** értékének módosítása, vagy az alábbi, bonyolultabb módszer, amelyben az eszköztipp mindig minden más elem fölött jelenik meg. Illeszd be ezt a CSS-t és JavaScriptet:

```html
<style>
#tooltip-global {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 999999;
  background: #222;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
</style>

<script>
(function(){
  let tooltip;
  function getTooltip() {
    if (!tooltip) {
      tooltip = document.createElement('div');
      tooltip.style.position = 'fixed';
      tooltip.style.zIndex = '999999';
      tooltip.style.background = '#222';
      tooltip.style.color = '#fff';
      tooltip.style.padding = '6px 10px';
      tooltip.style.borderRadius = '4px';
      tooltip.style.fontSize = '12px';
      tooltip.style.whiteSpace = 'nowrap';
      tooltip.style.pointerEvents = 'none';
      tooltip.style.display = 'none';
      document.body.appendChild(tooltip);
    }
    return tooltip;
  }
  document.addEventListener('mousemove', function(e){
    const el = e.target.closest('.tooltip');
    const t = getTooltip();
    if (el) {
      t.textContent = el.getAttribute('data-tip');
      const rect = el.getBoundingClientRect();
      t.style.left = (rect.left + rect.width / 2) + 'px';
      t.style.top = (rect.top - 3) + 'px';
      t.style.transform = 'translate(-50%, -100%)';
      t.style.display = 'block';
    } else {
      t.style.display = 'none';
    }
  });
})();
</script>
```

Ezután a **Táblázat** widget fejlécének **Szöveg** mezőjébe írd be:

```html
Fül 1 &nbsp; <span class="tooltip" data-tip="Az eszköztipp szövege">   <i class="fas fa-info-circle"></i> </span>
```

Nézd meg az eredményt az oldalon. Ez a módszer bármelyik beágyazott (inline) elemhez használható.

## Eszköztipp az űrlapokban

A JetFormBuilder mezőinél a **Helyőrző** (placeholder) szöveg mezőben megjelenő szöveget ad. Ezt a mező **Haladó** beállításaiban találod. Ha valódi eszköztippet szeretnél, ugyanazt a HTML-t írd a mező **Címke** mezőjébe, mint a fenti módszereknél.

## Gyakori kérdések

**Mit jeleníthetek meg egy egyedi eszköztippben?** Szöveget, képeket, ikonokat és hivatkozásokat.

**Mit lehet stílusozni?** A **Stílus** fülön az eszköztipp színei, betűtípusa, térközei, szegélye és egyéb tulajdonságai állíthatók.

**Hozzáadható eszköztipp más widgethez is?** Ezzel a módszerrel nem; csak a fent felsorolt widgetekben működik.

**Tehetek eszköztippet egyetlen táblázatcellába, vagy cellánként másikat?** Igen, mindkettő lehetséges.

**Lehet ugyanabban a widgetben az egyes eszköztippeknek más stílust adni?** Nem, ez jelenleg nem lehetséges.