Ce cod adaugă un tooltip la titlu. Crearea de sfaturi simple folosind HTML5, CSS și jQuery

Vlad Merjevici

HTML are deja un atribut de titlu global care poate fi adăugat oricărui element dintr-o pagină web. Prezența acestui atribut adaugă un sfat explicativ care apare atunci când treceți mouse-ul peste element. Fontul textului, dimensiunea tooltip și aspectul acestuia depind în general de sistemul de operare și nu pot fi modificate folosind stiluri. În plus, mulți dezvoltatori nu sunt fericiți că un astfel de indiciu dispare destul de repede. Acest lucru vă obligă să căutați modalități de a vă crea propriul sfat cu instrumente, care ar fi proiectat în modul dorit. Desigur, cea mai universală modalitate este, dar în unele cazuri este suficient să te descurci doar cu CSS.

De exemplu, am ales fotografii când treceți cursorul mouse-ului peste ele, se afișează numele fotografiei. Vom face textul în sine folosind proprietatea conținut și vom lua valoarea textului de la un anumit atribut prin attr() . Din păcate, conținutul nu va funcționa așa cum se dorește în combinație cu img , așa că fotografiile sunt inserate în element, la care adăugăm un atribut data-title cu text tooltip. Există o tentație de a introduce atributul titlu și de a-l folosi, dar în acest caz vor fi afișate simultan două sfaturi: unul este „nativ”, iar celălalt este al nostru. Deci folosim propriul atribut de titlu de date, deoarece HTML5 permite acest lucru. Astfel obținem următorul cod (exemplul 1).

Exemplul 1: Cod HTML

HTML5 IE Cr Op Sa Fx

Indicator în CSS

Să trecem la stilul descrierii noastre. Mai întâi trebuie să-l faci să apară. Pentru a face acest lucru, vom folosi pseudo-elementul ::after, la care adăugăm conținut: attr(data-title) .

Foto::after (conținut: attr(data-title); )

Se pare că după conținutul elementului cu clasa foto, va fi afișat textul din atributul data-title, ceea ce ne trebuia. Dar, din moment ce indicația ar trebui să apară numai când treceți cu mouse-ul peste fotografie cu cursorul mouse-ului, vom adăuga și pseudoclasa :hover.

Foto:hover::after (conținut: attr(data-title); )

Tot ce rămâne este să setați stilul dorit pentru sfatul nostru instrument, în special, poziția, culoarea de fundal, textul, cadrul etc. (exemplul 2).

Exemplul 2: stilul descrierii

HTML5 CSS3 IE Cr Op Sa Fx

Indicator în CSS .foto ( afișare: bloc inline; /* element bloc bloc */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează textul */ poziție: absolută /* Poziționare absolută */ stânga: 30% /* Poziție tooltip */ z-index: 1; : rgba( 255,255,230,0.9) /* Culoare de fundal semi-transparentă */ font-family: Arial, sans-serif /* Font font-size: 11px /* Tooltip text size: 5px; ; / chenar: 1px solid #333 /* Opțiuni de bord */ )

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Tip tooltip

Poziția indicatorului nu depinde de poziția cursorului, acesta apare în același loc când treceți cursorul peste imagine. Puteți face ca balonul să apară în partea de jos a fotografiei, astfel încât să nu acopere cea mai mare parte a imaginii. Stilul se va schimba ușor (exemplul 3).

Exemplul 3. Afișarea unui sfat explicativ în partea de jos a fotografiei

HTML5 CSS3 IE Cr Op Sa Fx

Indicator în CSS .foto ( afișare: bloc inline; /* element bloc bloc */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează textul */ poziția: absolută /* Poziționare absolută */ stânga: 5px /* Poziția indicației de bază */ z-index: 1; : rgba(0,42,167,0.6); /* Culoare de fundal semi-transparentă */ culoare: #fff; /* Text-align: center; -serif ; /* Font font */ font-size: 11px /* Tooltip text size */ padding: 5px 10px /* Margini: 1px solid #333;

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Tip tooltip

Din păcate, proprietatea de tranziție, pe care o puteți folosi pentru a anima indicația, nu funcționează cu pseudo-elemente. Prin urmare, va trebui să ne mulțumim cu apariția bruscă a balonului nostru. De asemenea, nu va exista niciun efect în browserul IE8 și mai devreme, această versiune nu acceptă ::după . Cu toate acestea, dacă înlocuiți acest pseudo-element cu :after , puteți obține o opțiune mai mult sau mai puțin funcțională.

Bună, dragi prieteni. Zilele trecute, unul dintre clienții mei m-a abordat cu o solicitare de a-și îmbunătăți site-ul. Sau, mai degrabă, faceți un nou formular de cerere pe site, deoarece vechiul formular s-a schimbat.

El a cerut, de asemenea, să atașeze un sfat pentru fiecare câmp de formular. Probabil că ați văzut astfel de indicii: atunci când mutați cursorul mouse-ului peste o imagine sau un cuvânt, apare un tooltip.

Desigur, există o mulțime de opțiuni pentru a implementa astfel de sfaturi. Desigur, concentrându-mă pe minimizarea încărcării pe server, am decis să fac sfaturi cu ajutorul HTML și CSS. Acest lucru este destul de simplu și nu încarcă serverul deloc.

Iar tipul unui astfel de indiciu depinde doar de priceperea și imaginația ta. În formularul de client, am implementat acest lucru ca o imagine cu un semn de întrebare lângă câmpul de introducere, trecând cursorul peste care apare un tooltip.

Exemplu de implementare Tooltip

Cum se creează un balon explicativ

Deci, întregul proces nu vă va dura mai mult de 5 minute. Mai întâi trebuie să decideți cum va arăta obiectul care atrage atenția. Adică, poate fi o imagine. Așa arată un tooltip simplu, creat folosind stiluri CSS. Și legat de imagine. sau .

Pentru a atașa un sfat explicativ la o imagine, imaginea trebuie mai întâi să fie și apoi încărcată pe site-ul dvs. Cred că nu are rost să mă oprim pe asta. Apoi, în locul în care doriți să afișați această imagine și, respectiv, tooltip, introduceți acest cod:

LINK IMAGINE " alt="hint" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ !}

Dacă acesta este un cuvânt sau o expresie, atunci trebuie să inserați acest cod în locul în care doriți să fie afișat indiciu.

WORD TOOLFIL TEXT

Acum trebuie să inserați stilurile în foaia de stil CSS, în majoritatea cazurilor acesta este fișierul style.css.

Deschideți panoul administrativ WP - „Aspect” - „Editor” - „Foaie de stil” și inserați aceste stiluri la sfârșit.

Ajutor (culoare: #2C8505; contur: niciunul; /*culoare de ajutor*/ cursor: ajutor; decor text: niciunul; /*aspectul cursorului când treceți cu mouse-ul, poate fi înlocuit cu indicatorul*/ poziție: relativă; /*poziție*/ ) /*tooltip position*/ .help span ( margin-left: -999em; position: absolute; ) /*hover tooltip*/ .help:hover span (familie de fonturi: Verdana, Tahoma, Geneva, sans-serif ; / *font*/ poziție: absolută /*poziție*/ sus: 25px margin-left: 200px imagini*/ .help:hover img (border: 0; ) /*tooltip block*/; fundal: nici unul repetă scroll 0 0 rgba(97, 177, 255, 0.9) /*culoare de fundal și transparență*/ chenar: 1px solid #2b82b8 /*border-radius: 5px; / box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2 : #fff /*tooltip font color*/ padding: 5px;

După cum puteți vedea, ți-am făcut sfaturi. Tot ce trebuie să faceți este să faceți modificări pentru a se potrivi designului dvs. și vă puteți bucura de sfaturile instrumente. Și dacă vizitatorii dvs. trebuie să completeze ceva, să se înregistreze pe site sau să efectueze o acțiune, atunci aveți nevoie pur și simplu de indicii. Iar vizitatorii tăi îți vor fi foarte recunoscători.

Este puțin probabil ca specialiștii în aspect să găsească ceva nou pentru ei înșiși în această postare. Această postare este mai degrabă pentru designerii de layout începători care, ca mine, au avut probleme la crearea și stilul de sfaturi universale.

Recent, când făceam un blog mic, m-am confruntat cu sarcina de a face sfaturi cu instrumente elegante, dar în același timp simple. După ce am încercat diferite moduri de a crea containere div separate pentru tooltips, sau de a crea tooltips cu CSS pur, am găsit o soluție universală care nu va aglomera codul, va fi compatibilă între browsere și, în același timp, va fi foarte simplu de implementat.
Oricine este interesat de metoda mea de a rezolva această problemă simplă, vă rugăm să consultați cat.

Soluție Metoda pe care ți-o voi oferi este destul de simplă și eficientă. Funcționează în toate browserele, chiar și IE 6 (testat de mine de multe ori). Ușor de schimbat și convenabil. Nu aglomera codul și îl clarifică. Poate fi schimbat cu ușurință pentru a se potrivi nevoilor dumneavoastră. De exemplu, întârzieți afișarea unui balon explicativ folosind setTimeout sau altceva.HTML Să presupunem că avem o pagină HTML cu un link, atunci când trecem cu mouse-ul peste ea, trebuie să afișam un balon explicativ:
Link pentru sfaturi instrumente
După cum poate ați observat deja din listă, folosesc preprocesorul LESS css.
Am inclus stiluri și scripturi CSS în fișiere separate. Avem, de asemenea, un link și un bloc div, care va fi containerul pentru sfatul instrument.
Specificația HTML5 permite utilizarea atributelor personalizate de tipul atribut de date, care pot stoca unele informații despre un element sau bloc. În atributele de date vom salva textul sfaturile instrumente.
Legătură
Pentru stocare folosesc atributul data-tooltip.
Am terminat cu HTML - putem trece la stiluri CSS. Folosesc biblioteca LESS Elements și o recomand tuturor, așa că voi scrie câteva proprietăți folosind acest cadru.
@import „css/elements.less”; #tooltip ( z-index: 9999; poziție: absolut; afișare: niciunul; sus:0px; stânga:0px; fundal-culoare: #000; umplutură: 5px 10px 5px 10px; culoare: alb; .opacity(0,5); . rotunjit(5px)
Din listare este clar că în prima linie conectăm LE, setăm blocul div#tooltip la poziționare absolută și îl ascundem. Apoi dăm blocului o culoare de fundal și o culoare de text, rotunjim colțurile (5px) și setăm valoarea de transparență la 50%. Acum vine partea distractivă - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( „sus”: eventObject.pageY + 5, „stânga”: eventObject.pageX + 5 )) .show()).mouseout(function () ( $("#tooltip.); ").hide() .text("") .css(( "sus": 0, "stânga": 0 )); )); ));// Sfârșit gata.
Acum adăugăm toate elementele cu atributul data-tooltip la selecție și, când trecem cu mouse-ul peste elementul dorit, obținem valoarea tooltip și o stocăm într-o variabilă. Apoi, adăugăm textul indicii în blocul #tooltip, îi dăm coordonatele cursorului de la marginea paginii + 5 px și în final afișăm blocul cu tooltip în locul potrivit. După ce mouse-ul părăsește elementul, ascundem blocul #tooltip, ștergem conținutul acestuia și îl întoarcem la 0;0;.

Asta e tot!
Ca rezultat, vom obține ceva de genul acesta: Demo

Datorită acestui script simplu, toate elementele de pe pagină care au atributul data-tooltip vor primi un tooltip.

Vă mulțumim pentru atenție!

Un tooltip HTML este un bloc cu informații suplimentare care apar atunci când treceți mouse-ul peste un anumit element al unei pagini web. Astăzi vom crea propriul nostru tooltip folosind HTML și CSS:

Vezi demo | Descărcați codul sursă

Vom putea folosi indicii CSS pentru majoritatea elementelor, cum ar fi linkuri, etichete, text cu stil etc. Va trebui să aplicăm mai multe clase elementului și să adăugăm un atribut de date cu textul descrierii.

Configurarea documentului

Trebuie să creăm un document HTML și să setăm marcajul sursă:

Sfaturi instrumente Demo // conținut

Am adăugat un link către Normalize.css care ajută la resetarea tuturor stilurilor de browser la valorile implicite și asigură că fiecare element arată la fel în toate browserele. Spre deosebire de o resetare CSS standard, Normalize.css nu elimină toate stilurile implicite, așa că nu va trebui să rescrieți stilul fiecărui element de la zero.

Am creat un div cu o clasă container în care vom plasa exemplele de bază de sfaturi HTML. Iată stilurile pentru corp și clasa .container:

body (familie de fonturi: „Work Sans”, sans-serif; dimensiunea fontului: 1.5em; înălțimea liniei: 1.4em; greutatea fontului: 700; culoarea fundalului: #28ABE3; culoarea: #fff; ) .container ( lățime: 800 px; margine: 100 px automat; fundal: radial-gradient (cercul cel mai îndepărtat colț la 400 px 250 px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Am centrat div-ul containerului setând margin-left și margin-right la auto . De asemenea, a adăugat ceva stil la secțiunea caroseriei pentru a-l face să arate mai bine.

Am decis să adaug un mic gradient CSS ușor pentru fundal. Dacă browserul nu acceptă gradienți CSS (acest lucru se aplică în principal pentru IE 8 și 9), culoarea de fundal va fi comutată înapoi la albastrul implicit (culoarea de fundal a secțiunii de corp).

Voi folosi indicii de trecere cu mouse-ul HTML cu etichete de ancorare, dar puteți atribui clase altor elemente inline, cum ar fi o etichetă puternică sau span . Mai jos este conținutul div-ului containerului: