Crearea unui tooltip folosind CSS
Publicat: 2018-05-12Probabil că știți deja ce este un tooltip.
Un balon explicativ este o pictogramă sau un text care, atunci când trecem cu mouse-ul deasupra, ne oferă mai multe informații într-un balon sau o fereastră pop-up.
În mod obișnuit, găsiți sfaturi cu instrumente în formulare, dar le puteți plasa oriunde utilizatorii au nevoie de mai multe informații.
În imaginea de mai sus, cercul cu semnul de întrebare în interior arată un sfat explicativ . Când treceți cu mouse-ul deasupra, acest sfat explicativ oferă mai multe informații despre tipurile de caractere pe care trebuie să le includă parola dvs.
Puteți obține cadre pentru a implementa sfaturi cu instrumente pe site-ul dvs., dar de cele mai multe ori, aceste cadre folosesc JavaScript pentru a realiza acest lucru.
În acest articol, vom învăța cum să creăm sfaturi instrumente folosind doar CSS într-un mod relativ simplu.
Înainte de a începe, fișierul HTML și CSS final pentru implementarea descrierii explicative este disponibil la sfârșitul acestui blog . Am descris în detaliu fiecare element folosit în HTML și CSS pentru implementarea tooltip în cel mai simplu mod posibil.
Veți putea implementa funcția de indicație pe orice site folosind doar HTML și CSS, după ce ați parcurs complet acest articol.
Deci hai sa incepem…
Vom începe prin a crea o pagină HTML simplă care să ceară parola.
Pasul 1: Crearea unei pagini HTML simplă pentru afișarea descrierii
Iată codul HTML de bază pentru pagina de formular ,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Awesome CSS Tooltip</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip">?</span> </form> </body> </html>
După cum puteți vedea, am legat fișierul nostru „ style.css ” în html-ul de mai sus.
<link href="styles.css" rel="stylesheet" type=" text/css" />
Vom crea un sfat instrument folosind acest fișier CSS.
Folosim un formular simplu pentru a încerca funcția tooltip. Acest formular are un singur câmp etichetat ca „ Parolă ”, deoarece îl folosim doar pentru a ilustra modul în care funcționează sfaturile instrumente.
<form> <label>Password:</label> <input type="password" /> <span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form>
Am folosit clasa „ tooltip ” pentru a implementa caracteristica tooltip folosind CSS. Vom discuta despre aceasta secțiunea următoare.
Pasul 2: Stiluri CSS de bază pentru pagina noastră HTML
Înainte de a crea CSS pentru „tooltip”, trebuie să creăm câteva stiluri CSS de bază pentru pagina noastră html .
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
Acest lucru va da o pagină html cu fundal verde frumos. De asemenea, am selectat fontul verdana și culoarea fontului ca alb.
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
Am poziționat formularul „relativ”, cu o lățime maximă de 600 pixeli și o marjă de 20%.
Formlabel{
font-size: 32px;
letter-spacing: 1px;
}
Clasa de etichete de formular este pentru a specifica dimensiunea fontului și spația dintre litere pentru textul etichetei pe care îl vom folosi.
forminput{
margin: 0 10px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #444;
}
Aici, avem stilurile pentru câmpul formular. Nu este nimic complicat în acest stil. Am oferit o marjă și o umplutură adecvate, împreună cu specificarea mărimii și culorii fontului pentru câmpurile de formular.
Așadar, acestea sunt stilurile noastre CSS implicite pentru pagina noastră de formulare pe care le vom folosi pentru a demonstra cum să implementăm caracteristica de tip tooltip folosind CSS.
Să creăm balon cu instrumente folosind CSS
Pasul 4: Stil CSS pentru Tooltip
Poate ați observat că am folosit clasa „ tooltip ” în fișierul nostru html. Acesta este stilul pe care îl vom aplica pentru semnul semnului de întrebare („?”), care va acționa ca balon nostru.
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
Mai întâi trebuie să poziționăm relativ sfatul instrument, aplicând „ poziție: relativă; ” stil. Motivul pentru poziționarea relativă a tooltip este că vom folosi pseudo elemente mai târziu în această metodă, care pot fi poziționate „Absolut”. Deci dorim ca acele pseudoclase „absolute” poziționate relativ la acest element.
În continuare, oferim o culoare de fundal neagră pentru sfatul instrumentului folosind metoda rgba(),
background: rgba(0,0,0,0.3);
în care r,g,b reprezintă roșu, verde și albastru și a reprezintă „ alfa ” care controlează opacitatea .
Vom acorda un fundal negru cercului nostru tooltip și vom reduce opacitatea acestuia la 0,3 pentru a-l face să semene cu o culoare verde închis .
În continuare, vom aplica câteva stiluri de bază de umplutură și de rază de margine semnului semnului de întrebare („?”) pentru a face ca balonul nostru să arate bine.
padding: 5px 12px; border-radius: 100%; font-size: 20px;
Cu CSS-ul de mai sus, aplicăm umplutură cercului care include „?”, și facem raza de frontieră 100% pentru a face un cerc complet.
Dimensiunea fontului determină dimensiunea lui „?” semn, pe care îl folosim ca indicație în acest exemplu.
De asemenea, adăugăm „ cursor:help; ” în CSS, acest lucru va da un semn de întrebare sub cursorul mouse-ului când treceți cu mouse-ul peste acel element, așa cum se arată în imaginea de mai jos.
Toot-tip-ul conține ceva conținut (în acest exemplu oferim mai multe informații cu privire la caracterele care ar trebui incluse în câmpul „parolă”).
Pasul 5: Oferiți conținutul pentru balonul în format HTML
Următoarea provocare în fața noastră este unde să punem acest conținut în balonul explicativ?
Pentru a îndeplini această sarcină, vom adăuga un atribut în fișierul HTML creat anterior.
<span class="tooltip">?</span>
Aici, nu dorim să adăugăm nici un marcaj suplimentar, cum ar fi crearea unui alt interval pentru a adăuga conținut în interiorul descrierii.
Putem include conținutul pentru sfatul explicativ în acest interval.
Vom face acest lucru adăugând un atribut „ date ”. Numele atributului de date aici va fi „ tooltip ”.
<span class="tooltip" data-tooltip="">?</span>
data-tooltip este atributul nostru de date cu ajutorul căruia adăugăm conținutul care ar trebui să fie afișat în interiorul tooltip.
În continuare, vom adăuga instrucțiunile referitoare la caracterul care ar trebui să fie prezent în parolă, în atributul nostru data-tooltip.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
Acum am adăugat textul care ar trebui să apară în balonul cu instrumente. În continuare, vom învăța cum să facem ca acest text să apară în balonul explicativ atunci când utilizatorii trec cu mouse-ul peste semnul de întrebare.
Pasul 6: Crearea unui container de tip Tooltip folosind pseudo-elemente
În primul rând, trebuie să creăm containerele în care trebuie să fie afișat conținutul descrierii.
Pentru a face acest lucru, să ne întoarcem la fișierul style.css și să creăm pseudo elemente pentru clasa .tooltip .
Vom crea ::după și ::înainte de pseudo-clase pentru a face să apară conținutul descrierii noastre.
Practic, folosind o pseudoclasă precum „ ::after ” poți viza o poziție imediat după elementul care folosește clasa principală și stilează acea poziție.
În mod similar, folosind pseudo-clasa ::before puteți stila poziția chiar înainte de elementul în care este folosită clasa principală (în acest caz „?” este acel element).
Este o pseudo-clasă foarte utilă pentru a injecta conținut suplimentar pe o pagină.
Vom crea o pseudo-clasă pentru „tootlip”, așa cum se arată mai jos.
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
}
Creăm o clasă comună pentru stilurile ::before și ::after.
Aici, am poziționat absolut atât stilurile ::before, cât și ::after, pentru că ne dorim ca acestea să fie poziționate deasupra „semnului de întrebare” și vrem să fie centrate deasupra „?”.
Pentru ca balonul să fie centrat deasupra simbolului „?” trebuie să folosim „ stânga:50%; ” atribut.
Acum, vom folosi :: înainte de a stila micul triunghi din partea de jos a balonului nostru.
::after este folosit pentru a stila conținutul din interiorul tooltip.
Să vedem cum se face.
Mai întâi vom crea micul triunghi în partea de jos a descrierii.
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
Ar trebui să folosim conținut:””; atribut pentru a arăta că acest element nu are un conținut. Deoarece am injectat un conținut gol , acum îl putem stila.
Putem crea triunghiuri în CSS folosind atributul border-width .
Pe această linie,
border-width: 10px 8px 08px;
Am specificat că lățimea chenarului în partea de sus este de 10 pixeli, dreapta este de 8 pixeli, în jos 0 pixeli și stânga 8 pixeli .
Acest lucru va crea un triunghi pentru noi.
În continuare, vom crea un chenar solid pentru această secțiune și vom face zonele din dreapta, de jos și din stânga transparente , astfel încât să fie văzută doar zona de sus „triunghi”.
border-style: solid; border-color: rgba(0,0,0,0.3) transparent transparent transparent;
După ce facem chenarul solid, aplicăm culori pentru părțile de sus, dreapta, jos și stânga ale chenarului.
Ar trebui să folosim același „ border-color:rgba(); ” aici, pe care l-am folosit pentru stilizarea cercului din jurul semnului de întrebare.
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
Aici, am dat culoare neagră (0,0,0) pentru porțiunea superioară a chenarului și am redus opacitatea acesteia la 0,3 pentru a ne oferi o culoare verde închis, la fel cum am făcut pentru a obține stilul pentru cerc în jurul „?”.
Am făcut porțiunile din dreapta, de jos și din stânga ale chenarului ascunse făcând transparent .
Chiar dacă am fi creat marginile din dreapta și din stânga, acestea sunt transparente. Singurul chenar cu culoare este chenarul de sus. Ceea ce va face acest lucru este că, chenarul ascuns din stânga și din dreapta ne va oferi un efect de triunghi împreună cu chenarul de sus colorat .
Rezultatul final va arăta așa.
Dacă căutați „i” pe Google, veți afla mai multe despre acesta.
Atributele „ Margin-stânga ” și „ sus ” sunt folosite pentru a poziționa acest triunghi centrat deasupra cercului.
top: -20px; margin-left: -8px;
Acum am creat coada triunghiulară în partea de jos a balonului nostru, care indică „?” semn.
Apoi, trebuie să stilăm regiunea dreptunghiulară rotunjită a balonului cu instrumente unde sunt afișate informațiile. Pentru aceasta, vom folosi atributul ::after .
.tooltip::after{
content: “some text”;
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
De aceea am folosit,
content: “some text”;
În secțiunea de deschidere a clasei pseudo .tooltip::after
Acum trebuie să dăm acestei secțiuni aceeași culoare de fundal pe care am folosit-o pentru a crea regiunea triunghiulară (care este neagră, cu o alfa/opacitate de 0,3).
Așa că am adăugat,
background: rgba(0,0,0,0.3);
Apoi am centrat această secțiune cu „semnul de întrebare”, ca înainte. Folosesc o lățime de 300 px pentru caseta dreptunghi rotunjită și o marjă de -150 px pentru a o centra în raport cu semnul întrebării.
top: -20px; width:300px; margin-left: -150px;
Acum vom da umplutură și vom face ca marginile dreptunghiului să fie rotunjite (prin aplicarea rază-chenar).
border-radius: 10px; color: #fff; padding: 14px;
Acest lucru va seta și culoarea textului din interiorul dreptunghiului rotunjit ca albă (#fff).
Acum regiunea dreptunghi rotunjită care afișează conținut este gata. Dar totuși, nu este poziționat corespunzător . Pagina HTML curentă va arăta ca ceva prezentat mai jos.
Practic, dreptunghiul rotunjit se suprapune deasupra regiunii „triunghi” pe care am creat-o, deoarece atât ::before , cât și ::after folosesc aceeași marjă și sunt plasate la 20 de pixeli deasupra semnului întrebării.
Trebuie să aducem caseta dreptunghiulară rotunjită chiar deasupra secțiunii triunghiulare pe care am creat-o anterior, astfel încât ambele împreună să apară ca o casetă de chat .
Nu știm care este înălțimea exactă a dreptunghiului rotunjit pentru a-l plasa chiar deasupra triunghiului, ceea ce dorim este să transformăm 100% înălțimea dreptunghiului rotunjit pe verticală , astfel încât să fie plasat chiar deasupra triunghiului.
Deoarece ambele elemente (triunghi și dreptunghi rotunjit) folosesc top: -20px; trebuie doar să transformăm partea superioară a dreptunghiului rotunjit vertical la o înălțime a pixelilor egală cu înălțimea proprie.
Pentru aceasta folosim, transform: translateY(-100%);
Acum avem o structură adecvată care arată ca o cutie de informații.
Pasul 7: Obținerea informațiilor reale în interiorul descrierii
Provocarea noastră finală aici este să obținem conținutul potrivit, care conține mai multe informații, în cadrul descrierii explicative.
Amintiți-vă că am plasat conținutul care ar trebui să apară în balonul explicativ în fișierul nostru HTML.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
Folosind CSS putem prelua un atribut din elementul HTML. Vom face asta folosind attr() în .tooltip::after pseudo CSS.
Deci, în loc de, content: “some text”;
Vom folosi content: attr(data-tooltip);
Aici, „ data-tooltip ” este atributul nostru HTML.
Folosind atributul pe care l-am dat pentru conținutul în HTML, vom putea să numim acel conținut și să arătăm în pseudo-CSS-ul nostru. Rezultatul va fi așa cum se arată mai jos,
Acum. tot ce trebuie să facem este să facem invizibil balonul nostru la început și să apară numai atunci când utilizatorii trec cu mouse-ul peste semnul semnului întrebării (?).
Acest lucru este foarte ușor de făcut.
Pentru a face indicația invizibilă la început, vom face opacitatea lui „0” în următorul pseudo CSS pe care l-am scris anterior.
.tooltip::before .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
}
Pentru efectul Hover vom adăuga un nou pseudo CSS în partea de jos a fișierului nostru style.css. Să facem opacitatea „1” pentru starea hoverată, astfel încât balonul să fie afișat numai la trecerea cu mouse-ul.
/* CSS for Hover effects */
tooltip:hover::before.tooltip:hover::after{
Opacity:1;
}
Acest pseudo CSS determină doar starea hovered, deoarece am folosit „:hover” după CSS-ul principal .tooltip
Acum sfatul nostru CSS este gata.
Dar tranziția de tooltip nu va fi atât de lină pe cât v-ați aștepta.
Puteți îmbunătăți și mai bine efectele de tranziție folosind CSS. Pentru aceasta, trebuie doar să adăugați regula de tranziție de mai jos în CSS pentru pseudo-clasele ::before și ::after.
Pentru a afla mai multe despre stilurile de tranziție care pot fi realizate folosind CSS, citiți articolul nostru „CSS Animations And Transitions”.
.tooltip::before.tooltip::after {
transition: all ease 0.3s;
}
Acest proces este mult mai ușor și mai puțin complicat în comparație cu implementarea tooltipului folosind JavaScript.
Pentru referință, găsiți fișierul HTML și CSS final pentru a practica acest lucru.
Fișier HTML final pentru testarea descrierii
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Tooltip</title> <link href="styles.css"rel="stylesheet"type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip"data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form> </body> </html>
Fișier CSS final care creează un balon cu instrumente
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
formlabel{
font-size: 32px;
letter-spacing: 1px;
}
forminput{
margin: 010px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #fff;
}
/* --------- Tooltip Styles ---------- */
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
transition: allease0.3s;
}
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
.tooltip::after{
content: attr(data-tooltip);
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
/* Hover states */
.tooltip:hover::before, .tooltip:hover::after{
opacity: 1;
}
Demo live
Vedeți Live CSS Tooltip în acțiune.