Tooltip creat cu stilul CSS
În postarea precedentă am descris un truc pentru a crea un gen de tooltip foarte simplu.Acum am să vă demonstrez un tooltip veriatbil, creat cu stilul CSS.
Majoritatea acestor elemente încă în prezent sunt bazate pe java-script ori jQuery, moment care duce la încărcarea grea a paginii, în timp ce codul CSS este mai ușor interpretat de către browsere și reduce substanțial din timp.
Baza elementului este o imagine .gif fragmentată în trei sectoare.
CSS
<style>HTML
a.tt{
position:relative;
z-index:24;
color:#70708C;
font-weight:normal;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{
z-index:25;
color: #AAAAFF;
}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0;
left:0;
padding: 15px 0 0 0;
width:200px;
color: #333;
font-size:13px;
text-align:center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display:block;
padding:30px 8px 0;
background: url("http://lh5.googleusercontent.com/-vjqSWFDnVmQ/UFi4OTrXRuI/AAAAAAAADHU/qqIFD0Zvqxg/s200/bubble.gif") no-repeat top;
}
a.tt:hover span.middle{
display:block;
padding: 0 8px;
background:url("http://lh5.googleusercontent.com/-TOwY58iGvNI/UFi4UEP4QYI/AAAAAAAADHo/_lS2ZKv27D8/s200/bubble_filler.gif") repeat bottom;
}
a.tt:hover span.bottom{
display:block;
padding:3px 8px 10px;
color: #548912;
background: url("http://lh5.googleusercontent.com/-vjqSWFDnVmQ/UFi4OTrXRuI/AAAAAAAADHU/qqIFD0Zvqxg/s200/bubble.gif") no-repeat bottom;
}
</style>
<div>
Dacă treci cu cursorul peste <a href="#" class="tt">acest text<span class="tooltip"><span class="top"></span><span class="middle">Lorem ipsum dolor sit amet,---- tristique ultricies. </span><span class="bottom"></span></span></a> ve-i deschide un tooltip cu conținut Lorem ipsum.
Iar <a href="#" class="tt">aici<span class="tooltip"><span class="top"></span><span class="middle"> Tooltip - descriere emergentă, situată înăuntru unui cadru care apare la trecerea cu cursorul peste cuvîntul marcat dintr-un text. Conține informație adițională, pe care utilizatorul o accesează în caz de necesitate.</span><span class="bottom"></span></span></a>vei găsi definiția unui tooltip.
</div>
Dacă treci cu cursorul peste acest textLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum lectus quis quam dignissim tincidunt. Nam volutpat, urna vitae gravida pretium, purus arcu porta tellus, ut convallis sapien risus eget lectus. Fusce in nisl nec eros commodo sodales sed tempus erat. In hac habitasse platea dictumst. Fusce eu aliquam ante. Suspendisse ultrices tortor a tortor tempor ut lacinia orci mollis. Nam molestie consectetur justo tristique ultricies. ve-i deschide un tooltip cu conținut Lorem ipsum.
Iar aici Tooltip - descriere emergentă, situată înăuntru unui cadru care apare la trecerea cu cursorul peste cuvîntul marcat dintr-un text. Conține informație adițională, pe care utilizatorul o accesează în caz de necesitate. ve-i găsi definiția unui tooltip.
Sursa
2012-09-18 22:58:00