Javascript / jQuery alkalmazása Elementorhoz - Tooltipek készítése Epro Formhoz
#elementorpro #Tippyjs #popperjs
Ebben a rövid videóban azt nézzük meg, hogyan tudunk Tooltip-eket készíteni az Epro Formunkhoz. A technika univerzális, a fókuszban az Epro form, de bármire ráhúzható, és független az Elementortól. A videó végén a pricing Table-t is megnézzük.
Egyszerű natív CSS tooltip helyett, egy külső könyvtárral dolgozunk, nevezetesen a Tippyjs-el.
https://atomiks.github.io/tippyjs/
A Tippy-ben megtalálható animációkat, ahogy azt a videóban is megemlítjük, külön kell behúzni. Amennyiben ez nem sikerül, az alábbi codepile linkben megtalálod, hogyan tudod behúzni. (ez a videó házifeladata, ha tudod próbáld meg egyedül teljesíteni).
Ha mégsem menne:
https://www.codepile.net/pile/qD88WXDJ
Időbélyeg
0:00:00 - Bevezető / Példa
0:06:25 - Felkészülés / HTML beillesztés
0:16:28 - Tippy JS alkalmazása
0:23:07 - Animáció említése / Házifeladat
0:26:00 - Templates
----------------------
Használt bővítmények:
https://elementor.com/
Tippyjs (külső js könyvtár, nem plugin)
https://atomiks.github.io/tippyjs/
Hasznos linkek:
▶Svg design
https://haikei.app/
▶ jQuery dokumentáció
https://api.jquery.com/
▶Shape generator
https://www.shapedivider.app/
▶Clip path generátor
https://bennettfeely.com/clippy/
▶CSS keyframes animációk
https://animista.net/
▶ Material színpaletta
https://www.materialui.co/colors
▶ Töréspontokhoz kijelzőméretek
https://screensiz.es/
▶ Gradient (Átmenet) készítő
https://cssgradient.io/
▶ CSS böngészőtámogatás ellenőrzése
https://caniuse.com