Sfaturi cu instrumente construite în întregime pe CSS. Cum se creează un tooltip în HTML? Sugestie Css la hover

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ă, întreb sub 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 transparenței 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 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 la IE 8 și 9), culoarea de fundal va fi comutată înapoi la albastrul implicit (culoarea de fundal a secțiunii corpului).

Voi folosi sugestii HTML pentru trecerea cursorului 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: