Paulturner-Mitchell.com / számítógépek / CSS tooltip: lépésről lépésre és eltávolítási módszerek

CSS tooltip: lépésről lépésre utasítások és eltávolítási módszerek

Kiegészítő információk a webhelyekről gyakraneszköztippek formájában helyezkedik el, amikor például az összetett rövidítések visszafejtéséhez vagy a felhasználói műveletek tisztázásához lebeg. Egy hasonló front-end megoldást tooltip-nek hívnak. Helymegtakarítást jelent az oldalon, lehetővé téve, hogy csak az alapadatokat jelenítse meg, de lehetőséget biztosítva az olvasó számára, hogy megismerkedjen a kiegészítésekkel, ha szükséges. A tisztán információs funkció mellett az eszköztippek fontos tervezési elemek is lehetnek, amelyek hangsúlyozzák a webhely általános stílusát és felhívják a figyelmet.

Szerszámtipp viselkedés

Egy olyan elemet, amelynek interakciója eszköztippet okoz, célnak nevezzük.

A felbukkanó blokkok általában fontos helyet foglalnak elde nem alapvető információ. Feltételezzük, hogy a felhasználó csak akkor megismerkedhet vele, ha akar. Annak érdekében, hogy ne zavarja, ne zavarja és ne zavarja a fő tartalmat, az eszköztippnek számos követelménynek meg kell felelnie:

Sima megjelenés.A célelem fölé történő véletlenszerű lebegést nem szabad kísérnie egy utalás éles ugrásával. Ez továbbra is elfogadható a kis szövegblokkok esetében, de kategorikusan nem megfelelő, ha az eszköztipp nagy vagy képeket tartalmaz.
Megfelelő elhelyezés.A súgóablaknak nem szabad lefednie a magyarázattal ellátott tartalmat, hogy a felhasználónak lehetősége legyen egyeztetni az adatokat. Azokban az esetekben, amikor az eszköztipnek túlnyomórészt dekoratív értéke van, ez elfogadható.
Nincs hatással más tartalomra.Az eszköztippeket úgy tervezték, hogy kisméretűek, alig észrevehető segítők legyenek a felhasználó számára, tehát nem okozhatnak kényelmetlenséget. A helyes eszköztipp nem mozgatja a szomszédos blokkokat, és nem lép túl az oldalon, gördítősávokat hozva létre.
Láthatóságát. A tanácsnak teljes egészében láthatónak kell lennie, és nem fedhet át más elemekkel, és nem rejthetõ el a böngészõablak szélén.
Könnyű kezelhetőség. Fontos, hogy a felhasználó intuitív módon megértse, hogyan kell felhívni és eltávolítani a tippeket, és nem tapasztal nehézségeket ezekkel a műveletekkel.

Tiszta HTML eszközleírás

A tanácsok készítésének képessége a webhelyek hipertext jelölésének nyelvén van beágyazva. Kezdetben a rövidítések és az összetett tudományos kifejezések megfejteni akarták.

Egy ilyen felbukkanó blokk létrehozásához szüksége van a címe attribútumra, amely bármilyen HTML címkéhez rendelkezésre áll.

A Proxima Centauri kb4.22 fényév a Földtől, amely 270 ezer-szer nagyobb a Földtől a Napig tartó távolságig.

A HTML-elemtip fő előnyei: a könnyű használat és bármilyen elrendezési elemmel történő felhasználás képessége - a szövegetől a képekig. De nagy hátrányai vannak:

nem formázhatja a szöveget;
túl egyszerű megjelenés, amelyet nem lehet megváltoztatni;
képbeillesztési képesség hiánya.

A HTML cím attribútuma csak olyan kis tippekhez alkalmazható, amelyek nem igényelnek speciális kialakítást. Egyébként hasznos tudni, hogyan lehet eszköztippek készíteni a CSS segítségével.

CSS tooltip

Készíthet gyönyörű, egyedi tippeket tartalmazó blokkot lépcsőzetes stíluslapokkal. Az alapvető CSS-fogalmakat használjuk:

abszolút pozicionálás - tippek vonására az általános dokumentumfolyamatból;
egy blokk teljes elrejtése inaktív állapotban az ingatlan felhasználásával kijelző;
ál : lebegamely az egér kurzora alatt bármely elemhez hozzá van rendelve;
ál : korábban és : utánamely egyszerű tanácsokhoz használható, hogy ne hozzon létre külön HTML elemet;
animáció és a tulajdonságok sima változtatása a megjelenés és eltűnés szép hatásainak elérése érdekében.

Ezeket a tulajdonságokat a modern böngészők jól támogatják, ami biztosítja az eszköztipp-mechanizmus megbízható működését.

az ál : lebegA lebegésen kívül reagál az érintőképernyő ujjlenyomataira is, amely lehetővé teszi a mobil eszközök támogatását.

Blokk vagy álnév

A CSS-eszköztipp lehet külön HTML blokk, saját struktúrájával, vagy egy másik blokk álneve. Ezen lehetőségek mindegyikének megvannak az előnyei és hátrányai, amelyeket figyelembe kell venni.

Egy különálló tárolókon belül sokkal könnyebben kezelhető a tartalom. Képek, fejlécek és egyéb elemek helyezhetők bele.

Az ál-elem lehetővé teszi a felesleges megszabadulástblokkolja és megkönnyíti az elrendezést. A szöveges tartalmat be lehet helyezni a cél elem attribútumába, és ne aggódjon az eszköztipp létrehozása miatt, a CSS mindent megtesz. A pszeudo elem azonban rosszul alkalmas egy összetett szerkezetű blokkra. Ezenkívül csak címkék bezárására is létrehozható. Egy ilyen tipilt nem csatolhat közvetlenül a képhez.

CSS felbukkanó

Készítsünk egy gyönyörűen megtervezett eszköztippet egy összetett szerkezettel a Kentaur csillagképből a legközelebb lévő csillaghoz.

Először határozzuk meg a HTML jelölést:

 A Kentaur csillagkép csillagai 

 Alpha Centauri 
 Beta Centauri 
 Theta Centauri 
 Centauri Gamma 
 Epsilon Centauri 

Proxima Centauri


Proxima Centaurus (latin proxima szerint - legközelebb) - egy vörös törpe, amely az Alpha Centauri csillagrendszerhez tartozik, a Földhez legközelebbi csillag a Nap után.

Díszítse és rejtse el a tippeket a CSS segítségével:

.star {
position:relatív;
}

/ * stílusok az elemleíráshoz * /
.star .tooltip {
kijelző: nincs;
pozíció: abszolút;
felső: 50%;
transzformáció: transzláltY (-50%);
balra: 100%;
}

/ * stílusok dekoratív háromszöghez * /
.star .tooltip: {...} előtt

/ * hover hint * /
.star: lebeg .tooltip {megjelenítés: blokk; }

A lista stílusai és a tooltip bármilyen lehetnek, a rövidítés miatt hiányoznak.

Az eszköztipp külön blokkba helyezése lehetővé teszi a benne lévő képek használatát, a szöveg formázását, és még álszelemek létrehozását a gyönyörű formatervezéshez.

Álnelem elemtipp

Bemutatja az eszköztipp létrehozásátálszeremből a grafikus szerkesztő panelje segít. Minden eszközt ikon formájában mutatnak be, amelynek célja a tapasztalatlan felhasználók számára nem egyértelmű. Annak érdekében, hogy senki sem maradjon boldogtalanul, adjon hozzá nevekkel ellátott ikonokat az ikonokhoz.

A panel HTML kódja így néz ki:

Az eszköz egyedi nevét az attribútumba helyezi data-tooltip. Van egy ikon a blokkban, de maga az eszközleírás hiányzik a HTML-kódban.

Mivel az eszköztipp csak rövid magyarázó szöveget fog tartalmazni, akkor álszelemeket is használhat, hogy ne zavarja meg a világítótáblát.

/ * az ikon általános stílusai * /
.hangszer {
pozíció: relatív;

szín: # 666;
háttér: fehér;

kurzor: mutató;
}

/ * a lebegő ikonok stílusai * /
.instrument: hover {
háttér: # 666;
szín: fehér;
}

/ * tippek a stílusra * /
.instrument: hover: {után
tartalom: attr (adat-elemleírás);
pozíció: abszolút;
balra: 100%;

szín: # 666;
}

Az ál-elem csak akkor jelenik meg, ha az emelőt lebeg, tehát nem kell elrejteni a display: block segítségével. Helyét a tulajdonságok szabályozzák pozíció és bal / jobb / felső / alsó. Az attribútumból való beolvasás data-tooltip A CSS tooltip céltartalmi elem funkciót biztosít attr (). A dekoratív stílusokat nem veszik figyelembe a rövidség miatt.

Tipp megjelenése, ha szkriptek nélkül kattint

Az előzőekben tárgyalt eszköztipp-mechanizmusok reagáltak arra, hogy a cél elem fölé lebegjenek, és a CSS ál-osztályon alapuljanak. : lebeg. Bizonyos helyzetekben előnyösebb, ha kattintással nyit meg egy tippet. Egy hasonló hatást könnyű megvalósítani a JavaScript-ben, de a CSS képes elvégezni a munkát.

A CSS ál-osztályok listája között van egy csodálatos osztály : fókuszKapható linkekhez és bemeneti elemekhez. különböző : lebeg, который исчезает сразу же, как уходит курсор egér, ez az ál-osztály lehetővé teszi a cél elem aktivitásának megmentését. És ha a beviteli mezők szemantikailag nem nagyon alkalmasak egy eszköztipp létrehozására, akkor a linkek rendben vannak.

Cserélje ki az első példa listájának elemét a linkre:


Proxima Centauri


Proxima Centaurus (latin proxima szerint - legközelebb) - egy vörös törpe, amely az Alpha Centauri csillagrendszerhez tartozik, a Földhez legközelebbi csillag a Nap után.

attribútum href értékkel javascript: érvénytelen (0) szükséges annak elkerülésére, hogy a böngésző bármilyen módon reagáljon a hivatkozásra.

A következő stílusok lehetővé teszik, hogy kattintással hívj fel egy csillagot és a csillag leírását:

.star .tooltip {
kijelző: nincs;
}

.star: focus .tooltip {
kijelző: blokk;
}

A link addig fókuszál, amíg a felhasználó az oldal bármely pontjára kattint.

Tehát egy webhelyen a tippek sokféleképpen létrehozhatók, még a JavaScript használata nélkül is. Mindegyik jó, csak ki kell választania az adott helyzethez legmegfelelőbbet.

tetszett: