Simple tooltips în CSS
Implementarea de instrucțiuni simple cu atributul de date-titlu
Cea mai simplă opțiune este stilizarea CSS a unei sugestii convenționale bazate pe text. Pentru a face acest lucru, trebuie să utilizați atributul de date-titlu. în loc de titlul obișnuit. pentru a evita apariția a două solicitări simultan - cu propriul design și standard, care nu pot fi schimbate.
Structura HTML arată astfel:
?
Atributul tabindex pentru etichetele care trebuie forțate să se concentreze asupra clicului este obligatoriu (!), Precum și valoarea sa - orice număr întreg. În caz contrar, pentru o referință sau o altă etichetă, concentrarea pseudo-clasă nu va funcționa. Unicitatea valorii pentru acest atribut pe pagină nu este importantă.
Bara de instrumente va fi afișată utilizând: înainte de pseudo-element. întocmit în consecință.
span.support:: înainte de conținut: attr (date-title); / * pune un indiciu în pseudo-elementul * /
afișare: niciunul; / * ascunderea sugestii * /
>
Pentru a implementa aspectul acestui indiciu asupra clicului, se utilizează următorul cod CSS:
span.support:focus:: înainte de afișare: blocare;
>
Pentru a forța o linie dintr-un vârf de instrument dintr-un atribut de titlu standard sau făcută cu un atribut alternativ - titlu-date. suficient în locul potrivit pentru a insera simbolul transferului HTML - # 013;
Sfat: Implementarea clic-through utilizând eticheta de referință
Exemplu, atunci când un bloc cu un indiciu se află în interiorul linkului:
a.support:focus.tip display: bloc;
>
Locația directă după link:
a.support-două: focalizare + .tip-bloc .tip-două afișare: bloc;
>
Un înveliș suplimentar de împachetare este un container cu clasa de tip "tip-bloc" utilizat atunci când promptul este localizat direct lângă elementul de apel pentru a manipula poziția vârfului de instrument cu poziția absolută față de acesta.
afișare tip bloc: inline-block;
poziție: relativă; / * Necesar * /
fundal: transparent;
marja: 0;
umplutura: 0;
frontieră: 0;
înălțime: 0;
lățime: 1px;
>
Creați un indiciu pe ecran cu eticheta INPUT
Când utilizați o etichetă de formă multifuncțională Designul HTML este un pic mai complicat decât cel precedent. Exemplul adaugă, de asemenea, un element suplimentar - o cruce pentru a închide tooltip-ul (etichetă
Mai întâi, trebuie să ștergeți caseta de selectare:
vârful afișajului casetei: niciunul;
>
Promptul este organizat după cum urmează:
* .tip-three display: block;
>
Puteți ascunde blocul de tip pop-up făcând clic pe pictograma întrebării sau pe butonul de închidere al sugestiilor care au fost create în mod corespunzător.
Pseudo: verificat este aplicată elementelor, cum ar fi comutatoare (tip = „radio“) sau cutii (type = „caseta“), atunci când este selectat, permițând în același timp adiacente principale și manipula (+ sau
), aplicându-le proprietățile necesare.
Cuvintele, așa de vicleni sau așa cum se spune - CSS: hack-ul verificat, vor suna astfel: "Dacă caseta de selectare este bifată, aplicați stilul următor acestui element sau acel element". Exemplul din acest articol este unul dintre numeroasele utilizări: verificat.
O descriere mai detaliată poate fi găsită aici.
Indicația care apare atunci când plasați cursorul peste
Pentru a organiza afișarea promptului pe ecran în acest fel, este suficient să utilizați: hover în loc de pseudo-class: focus.
De exemplu:
a.support-hover: afișare hover .tip: bloc;
>
a.support-hover: hover + .tip-bloc .tip afișare: bloc;
>
- atunci când blocul este situat direct lângă elementul de apel.
Pentru toate elementele, cu selectorii corespunzători. odată ce puteți specifica stiluri comune care vor fi aceleași pentru orice design:
- pentru blocul principal (un element cu clasa .support):
display de suport: inline-block;
poziție: relativă; / * parametrul necesar * /
text-decoration: nici unul;
cursor: pointer;
>
- aspect ca un buton (etichetă ):
suport em background: # FF6600;
border-radius: 20px;
frontieră: 1px solid # 999;
text-align: centru;
culoare: #FFF;
font: normal bold 16px Arial;
umplutura: 0 4px;
>
- design pentru tooltip - ascunde-l în mod implicit, setați proprietățile care determină poziția și aspectul acesteia:
sfat,
span.support::before/* dacă utilizați atributul de date-titlu * / display: none;
poziția: absolută;
z-index: 9998;
top: 0;
stânga: 100%;
fundal: #EDEDED;
text-aliniere: stânga;
culoare: # 000;
cursor: implicit;
padding: 5px;
margine: -15px 0 0 10px; / * reglează poziția, valorile depind de designul utilizat * /
lățime: 200px;
min-înălțime: 50 pixeli;
înălțime: auto;
>
Unele browsere, în special Google Chrome, când primesc un element de focalizare, o încadrează într-un cadru, este cu siguranță foarte utilă, dar nu în acest caz. Pentru a scăpa de acest cadru, puteți utiliza CSS pentru a seta proprietățile corespunzătoare pentru linkul dorit.
În exemplul nostru, se arată astfel:
*: contur focus: nici unul;
>
Acum, în funcție de versiunea utilizată, rămâne să se organizeze funcționalitatea tipului de instrument, care constă în aplicarea de pseudo-clase.
Pe acest pachet este totul.
Se răcește. Pot să vă rog să vă asigurați că conținutul nu este plasat în interiorul etichetei "a" așa cum faceți în cel de-al doilea exemplu ce se face în scenariile? Dar al doilea exemplu utilizează script-ul în cazul în care acesta nu este utilizat, atunci când faceți clic pe Deschidere bloc, el dispare, sau în cazul în care script-ul nu se oprește, aparatul poate fi închis numai dacă faceți clic pe cruce, și altele asemănătoare ca și în primul exemplu de realizare, în orice loc al ecranului. Ca și faptul că, fără a schimba script-uri un pic prima opțiune a fost de a conținut, cum ar fi al doilea mare. Mulțumesc
Puteți face acest lucru, dar este o poveste complet diferită și un cod complet diferit. Pentru această opțiune, puteți utiliza IMPUT-urile și pseudo-class: checked. dar apoi trebuie să scrieți CSS separat pentru fiecare prompt. Varianta cu scriptul este cea mai simplă și, prin urmare, este făcută la minimum, cu atât mai multe funcții - cu atât mai mult cod, nu va fi un script simplu, ci un plug-in întreg. Dacă aveți nevoie fără un script, utilizați această opțiune, în interiorul căruia puteți plasa totul. cu excepția referințelor.
Ne pare rău, au reflectat un pic, bine, această opțiune este că nici un scenariu potrivit, dar întâlnit doar o singură problemă, link-urile plasate în unitate, puteți da clic este de asemenea posibil, dar dacă ai pus în această listă bloc tag-ul (select-> opțiune) și faceți clic pe listă, apoi blocul dispare imediat, am înțeles aici deja acest lucru nu este corect? Și este posibil, în noul script de a face ceva pentru a nu utiliza plug-hoverIntent?
Am folosit ajutorul de 6 luni și totul a funcționat. Dar mai recent, indiciul a încetat să mai funcționeze.
Am încercat să folosesc alte servicii pentru ideea mea și nu a ajutat, rezultatul este același. În același timp, dacă există text în sugestie, atunci totul funcționează corect. Și dacă faceți clic pe textul din interiorul tooltip-ului, îl puteți selecta, copia și chiar să priviți codul html. / Bara de instrumente dispare când faceți clic pe ea, dar într-o altă zonă a ecranului.
Se pare că diferența a devenit că, dacă am folosi tasta atunci când faceți clic pe un sfat, dispare, iar utilizarea de text în interiorul sfaturi este și eu trebuie să-l închidă tine, făcând clic în altă parte în ecranul (de exemplu, așa cum am și trebuie).
Cum pot face ca indiciul să nu dispară și că butonul de rețea socială a funcționat. Voi fi fericit cu orice idei.
Mulțumesc că mi-ai răspuns. Acum am rezolvat problema și această opțiune mi se potrivește.
După cum am spus mai înainte, totul a funcționat și, pentru a fi sincer, toate acestea mă împing spre ideea că lumea sa răzgândit și sa schimbat un fel de validare pentru pseudo-clasa de focus. I-am inlocuit cu un hover si totul a functionat.
Acum, când plasați mouse-ul peste mouse-ul, tooltip-ul iese și butoanele sunt clicabile.
Vă mulțumim pentru material) Este foarte simplu, accesibil și inteligibil și, cel mai important, luând în considerare cerințele pentru a minimiza totul la ceea ce merită (păstrați-o)
Alo
Un înveliș suplimentar este un container cu clasa de tip "tip -tip" folosit pentru a manipula poziția vârfului de instrument cu poziția absolută față de acesta.
Întrebarea este de ce, dacă eliminați complet această clasă ^ span ".tip-block" ^ ^ / span ^ nu apare sugestia? Semnul de întrebare își schimbă culoarea, dar promptul nu apare. Deși este scris că este necesar să se manipuleze poziția indiciului cu privire la aceasta.
Articole similare
Trimiteți-le prietenilor: