Idle time tultip or the pop-up help

Rather often I apply this simple reception, but about him did not tell. The essence - at prompting the mouse on opredelnnyj the text appears the brief explanatory or the expanded information near to the text. An example  (and an example for an opera)

HTML


As:hover while in IE only for an element a (links) that unfortunately is supported the compelled code - such:



<a class = "tt" href = "*"> the Text of the link

<span> the Explanatory to the link </span>

</a>


The class tt simply speaks about that that span inside such links will be displayed on prompting a mousy. Without CSS the given design looks quite logically. Besides it is possible to recollect search optimization and to use this reception

CSS


Business for small - to force all this to work.

Such idle time CSS magic will force tultip tultipit`sja:



a.tt span {

display:none;/*sobstvenno we hide tultip - while the mouse not navedena*/

}

a.tt:hover {

position:relative;/*Stavim a reference point for tultipa inside of given ssylki*/

z-index:23;/*ehto it would be necessary that tultip was shown atop of this and others ssylok*/

}

a.tt:hover span {

display:block;/*pokazyvaem tultip at navedenii*/

position:absolute;

top:-10px;

left:40px;/*tri lines for a position tultipa concerning the left top corner ssylki*/

z-index:22;/*mne 22 + see vyshe*/

background: * fafafa;/*fon, that would be visible tultip*/

}


Actually and all. The rest ukrashatel`svo. A working example minimally embellished


Such up to a pain simple priemchik, quite often enough effectively appearing.

Certainly to him to not compete with tultipami chasing for the cursor of the mouse. But also to them{him;it} on simplicity with it  to not compete.







© Web Development Company Conkurent, LLC 2008-2009. All rights reserved.