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

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:

<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:

<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ó:

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.
•  : 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é:

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:

.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:

<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:

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.