Hvernig á að búa til einfaldan CSS3 Tooltip

Tólverkfæri eru frábær leið til að sýna notanda meiri upplýsingar með því einfaldlega að sveima yfir mynd eða texta. Þeir geta td verið notaðir til að fá texta fyrir myndir eða lengri lýsingar fyrir tengla eða gagnlegar upplýsingar sem gætu bætt notendaviðmót á síðuna þína án þess að hafa áhrif á hönnunina.

Í dag ætla ég að sýna þér hvernig á að búa til einfalt tóltip með því að nota HTML og CSS til að birta titilmerkið á tenglum þínum.

Við skulum byrja á því að búa til nokkur einföld merking fyrir tengilinn. Við þurfum að gefa það titil sem verður tóltip innihald og úthluta það í bekknum:

CSS3 Tooltip

Næsta skref er að búa til nokkrar rudimentary stíl fyrir tooltip bekknum okkar:

.tooltip{display: inline;position: relative;}

Við sýnum nú tólið okkar í samræmi við tengilinn okkar með því að nota hlutfallslega staðsetningu. Næst viljum við búa til hringlaga kassann til að mynda líkamann á tóltipinu og stilla það þannig að það flýgur fyrir ofan tengilinn:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Við erum að nota: sveifluglugga sem velur þátt, í þessu tilfelli tengilinn okkar, á mouseover og the: after selector, sem setur inn efni eftir valið atriði. Við höfum tilgreint svörtu bakgrunn með 80% ógagnsæi og fyrir vafra sem styðja ekki RGBA liti höfum við veitt dökkgráða bakgrunn.

Lítillega ávalar horn eru búnar til með því að nota rammaglugga eiginleika og við höfum sett textalitinn í hvítt. Að lokum höfum við sett tækjapakkann vinstra megin við hlekkinn og bætt við smá púði.

Eins og heilbrigður eins og stíl og staðsetning höfum við stillt innihald eignarinnar:

content: attr(title);

Þessi eign leyfir okkur að setja inn efni sem við viljum sem getur verið strengur, fjölmiðlaskrá eða eiginleiki frumefnisins. Í þessu tilfelli erum við að nota titileiginleika tengilinsins.

Nú þegar þú sveima yfir tengilinn þinn ætti að vera að finna tóltip ofan við það með textanum sem þú stillir sem titilinn þinn. Við höfum eitt vandamál þó að titilupplýsingarnar séu sýndar tvisvar: einu sinni í tóltipinu og einu sinni í vafranum. Til að laga þetta þurfum við að gera smávægilegar breytingar á HTML okkar:

CSS3 Tooltip 

Það sem við höfum gert hér er að vefja tengilinn texta í span merki með eigin titil eigindi hans. Núna birtist vafrinn titillinn sem er settur á spanmerkið þegar hlekkurinn er sveiflast yfir.

Til að ljúka við munum við bæta við ör í botn tóltipsins, til að gefa það þá litla aukalega snerta stíl. Við gerum þetta með því að nota: fyrir val og nokkrar landamæri:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Við erum að nota nokkra landamæri járnsög hér til að búa til áhrif örs: Setjið landamærulitirnar til vinstri og hægri til gagnsæjar og stjórnar landamærum breiddum. Við höfum einnig sett örina þannig að hún situr neðst á stikunni.

Og þar sem þú hefur það, einfalt tóltip með titilmerki frumefnisins sveiflaðist yfir. Þú gætir líka notað þetta til að setja upp alt tags, eða jafnvel setjaðu eigin texta inn í CSS til að skjóta upp þar sem þú vilt.

Þú getur skoðað a vinnandi kynningu hér .

Hvernig byggjaðu verkfæri? Hefur þú notað þessa tækni á síðuna? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, vísbendingarmynd um Shutterstock.