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

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>

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.

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

Table of Contents

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

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

Magyarázat

Záró gondolatok

Related articles

Guide to Embedding 3D Models on Any Website

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

Sablon vagy egyedi design?

Let's bring your vision to life!