<a title>vārds, frāze</a> dažādošanas iespējas

[DeUld]

Nereti web lapās vārdam vai frāzēm prasās piekabināt paskaidrojošo tekstu, lai tas parādītos līdz ar kursora novietošanu uz tā. Ierastais veids <a title>vārds, frāze</a>. Efektivitātes nolūkos jautājums par to, kādas ir html iespējas dažādot paskaidrojošā teksta parādīšanos pie konkrētiem vārdiem, frāzēm web lapā?

Labots Janvāris 20, 2012 - DeUld

[versatile]

kā gribi, tā programmē un rādi.

Ideja vienkārša - ar javascript - piem., jquery - kad pele uziet uz kādas konkrētas klases elementa, nolasām title, ieliekam divā, nodzēšam title, rādām divu (un sekojam peles kustībām ar to!) - kad braucam prom, slēpjam divu, div saturu leikam iekš title, div saturu iztīrām...

[Vilx-]

Tīri HTML - nav vienkārši. Ja neskaita JavaScript (un tad jau daudz variantu), tad vēl nāk šitāds prātā:

 

CSS:

.tooltips
{
display: none;
}
:hover > .tooltips
{
display: block;
position: absolute;
top: 100%;
padding: 2px;
border: 1px solid black;
background-color: #FFFFCC;
white-space: nowrap;
color: black;
}

 

HTML:

<a href="www.boot.lv" style="position: relative">Linka teksts<span class="tooltips">Tooltipa teksts</span></a>

 

Demonstrācija iekš JSFiddle

Labots Janvāris 20, 2012 - Vilx-