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

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:

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

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

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:

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

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

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.