Tooltip saját stílusa, a felhasznált html css

Címkék: CSS, HTML, CSS3

Tooltip saját stílusa, a felhasznált html css

Ebben a cikkben fogunk beszélni, hogyan lehet egy szép tooltip csak azt jelenti, HTML és CSS.

Előzetesen, ez a módszer csak akkor működik, kettős jelölési (melyek a nyitó és záró tag).







A lényege abban áll, hogy a belsejében a tag, amely szeretné Eszköztipp egyedi design, akkor lehet üzembe rejtett egység, amely akkor jelenik meg, ha lebeg.

Készítsünk az elrendezés például:







És a megfelelő stílus:

Úgy tűnik, hogy az egész, de ez a módszer van egy csomó hiányosságok, néhány ezek közül:

  1. Ha az oldal lesz két azonos elem a hegyével, akkor jelenik meg, ha lebeg a tippeket (megoldott - hozzáadásával minden egyes eleme egy egyedi osztály, ennek következtében növeli a HTML és a CSS kód)
  2. Megjelenítheti tippeket a jobb felső sarokban a szöveg lehetséges, csak akkor, ha a szülő egység már teljesen szöveges utasításokat (megoldás - állítsa be a szélességét a blokkok alá a szöveget, mint a div).

De a módszer jól működik, például a linkek (ezek tömörített szöveg), és ha kell, hogy csak egy csipetnyi egy vagy több link, ez is nagyon alkalmas, nem tölti ki a kódot extra osztályok és szelektor.

Példa látható a bemutató oldal:

Tooltip saját stílusa, a felhasznált html css




Kapcsolódó cikkek