Magyarázó szövegek létrehozása Webflow-ban

Ebben a bemutatóban végigvezetlek, hogyan készíthetsz tooltipeket Webflow-ban egy egyszerű HTML struktúrával és minimális CSS-sel. Ez a módszer lehetővé teszi, hogy könnyedén másold a tooltipeket különböző projektekbe néhány beállítással. Képeket is hozzá fogok adni, hogy még világosabb legyen a projekt struktúrája.

1. lépés: A HTML struktúra beállítása

Tooltip tartó: Hozz létre egy div elemet, és add meg neki a tooltip osztályt. Ez a tartó fogja tartalmazni az ikont és a tooltip szöveget.
Tooltip ikon: A tooltip tartóban adj hozzá egy elemet, amely az ikonként vagy lebegő aktiválóként fog szolgálni.
Tooltip szöveg: Az ikon mellett adj hozzá egy másik div-et, és add meg neki a tooltiptext-w hide osztályt. Ez fogja tartalmazni a tooltip szöveget, és alapértelmezés szerint rejtve marad.

HTML struktúra:

<div class="tooltip">
  <div class="icon"> <!-- Icon or image goes here --> </div>
  <div class="tooltiptext-w hide">Your tooltip text here</div>
</div>

2. lépés: CSS hozzáadása

Ez a CSS fogja szabályozni a tooltip szöveg láthatóságát és az átmenet effektjét:

.tooltip .tooltiptext-w.hide {
  visibility: hidden;
  transition: opacity 700ms;
  opacity: 0;
}

.tooltip:hover .tooltiptext-w {
  visibility: visible;
  opacity: 1;
}

Magyarázat

Kezdeti állapot: A .hide osztály alapértelmezés szerint rejtve tartja az eszköztár szövegét visibility: hidden és opacity: 0.
Átmenet: Az opacity-re 700ms átmenetet alkalmazunk a sima átmenet érdekében.
Hover-effektus: Amikor a .tooltip fölé mozgatja a kurzort, akkor a .tooltiptext-w opacity: 1 mellett láthatóvá válik.

Záró gondolatok

Ez a megközelítés megkönnyíti az eszköztippek létrehozását és testreszabását a Webflowban. Ennek a struktúrának a beállításával minimális erőfeszítéssel újra felhasználható az eszköztípus bármelyik projektben.

1. lépés: A HTML struktúra beállítása

2. lépés: CSS hozzáadása

Magyarázat

Záró gondolatok

Legújabb Cikkeink

Figma tervek átalakítása lenyűgöző Webflow oldalakká

Valósítsuk meg együtt az elképzeléseit!