# Egyéni tippek (tooltip) a Fülekben és a Klasszikus harmonikában

> Súgószöveg megjelenítése a fülek és a harmonikák címében: HTML-attribútummal, beillesztett HTML-lel, CSS-sel és JavaScripttel.

A JetTricks bővítmény a widgetekhez ad tippet, de a widgeten belüli, sorközi elemekhez (például egy fül címéhez vagy egy táblázatsor szövegéhez) nem. Ide az alábbi módszerek valók. Mindegyikhez elég az ingyenes Elementor és az a widget, amelyikben a tippet megjeleníted: a JetTabs **Fülek** vagy **Klasszikus harmonika** widgetje, a JetElements táblázata, illetve a JetFormBuilder űrlapmezői.

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

Ez a legegyszerűbb, de a tipp csak asztali gépen, rámutatáskor látszik, mobilon nem.

1. Add az oldalhoz a **Fülek** widgetet.
2. Nyisd le a **Tételek** (Items) részt.
3. A tétel **Felirat** mezőjébe írd be a következő HTML-t:

```html
Szállás <i title="Ide írd a tipp szövegét" class="fas fa-info-circle"></i>
```

A `title` értéke a tipp szövege, a `fa-info-circle` pedig egy tájékoztató ikon. A látogató az ikon fölé víve az egeret, megjelenő tippként látja a szöveget.

## 2. módszer: beillesztett HTML (asztali gépen és mobilon)

Ez a módszer rámutatáskor vagy koppintásra is működik. Érdemes ikont vagy rövid jelölést tenni a cím mellé, mert mobilon a látogatónak rá kell koppintania, és látnia kell, hogy az elem interaktív.

### HTML a widget címében

A következő elem a **Fülek** és a **Klasszikus harmonika** widget tételcímébe is beírható:

```html
Első fül: &nbsp; <span class="tooltip" data-tip="Ide írd a tipp szövegét"> <i class="fas fa-info-circle"></i> </span>
```

- `Első fül`: a fül neve.
- `&nbsp;`: szóköz, annyiszor írhatod, ahányszor kell.
- `data-tip`: a megjelenítendő tipp szövege.
- `fa-info-circle`: Font Awesome 4 „info” ikon.

Ha az ikon nem jelenik meg, az Elementor beállításai között kapcsold be a Font Awesome 4 támogatását: **Elementor → Beállítások → Haladó** fül, **Font Awesome 4 támogatás betöltése** → **Igen**.

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

```html
Első fül &nbsp; <span class="tooltip" data-tip="Ide írd a tipp szövegét"> <sup><i class="fas fa-info-circle"></i></sup> </span>
```

### Egyéni CSS és JavaScript

A `tooltip` osztályú elem megjelenítéséhez egyéni CSS-t és JavaScriptet is be kell illesztened. Ezt megteheted az Elementor Pro **Egyéni elemek → Kód** (Custom Code) szerkesztőjében, vagy bármelyik kódrészlet-bővítménnyel, amelyik JavaScriptet is kezel (például a Post Snippets ingyenes változata; ilyenkor a CSS-t és a JavaScriptet külön illeszd be). Az Elementor Pro-s módszernél a kód beillesztése után kattints a **Frissítés** gombra a mentéshez.

Ha a tippet a JetElements **Táblázat** widgetének egyik sorába teszed, add hozzá ezt a CSS-t is, hogy a tipp ne vágódjon le a cella szélén:

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

### Ha a tippet más elem takarja

Ha a tipp egy szülő tároló miatt más elemek alá kerül, két megoldás van: állítsd át a szülő tárolók **Z-index** értékét, vagy használd az alábbi módszert, amelyben a tipp mindig az oldal legfelső rétegén jelenik meg. Ehhez illeszd be a következő kódot:

```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 JetElements **Táblázat** widgetében a fejléc **Szöveg** mezőjébe írd be ugyanazt a HTML-t, mint a fülek címénél:

```html
Első oszlop &nbsp; <span class="tooltip" data-tip="Ide írd a tipp szövegét"> <i class="fas fa-info-circle"></i> </span>
```

Ellenőrizd az eredményt az oldal nyilvános felületén. A módszer bármilyen sorközi elemre használható. Blokk típusú elemekhez (sablonokhoz, widgetekhez) a JetTricks bővítmény rugalmas tippjeit érdemes használni, ahol a pozíció és az animáció is állítható.

## Tipp az űrlapmezőn

A JetFormBuilder mezői között a súgószöveg a mező **Haladó** (Advanced) beállításai alatti **Helyőrző** (Placeholder) mezőbe írható, ez a mezőben jelenik meg. Ha valódi tippre van szükség, használd a fenti HTML-t a mező **Felirat** (Label) mezőjében.

## Gyakori kérdések

**Mi jeleníthető meg egy egyéni tippben?** Szöveg, kép, ikon és hivatkozás.

**Mit lehet stílusozni a tippeken?** A **Stílus** fülön a színek, a betűtípus, a térközök, a szegélyek és más beállítások állíthatók.

**Más widgetekhez is adható tipp ezzel a módszerrel?** Nem, ez a lehetőség jelenleg nem érhető el.

**Lehet tippet adni csak egy táblázatcellához, vagy cellánként másikat?** Igen, mindkettő lehetséges.

**Lehet ugyanabban a widgetben a tippeknek különböző stílust adni?** Nem, ez jelenleg nem lehetséges.