Mostrare una nota al passaggio del mouse

Dopo aver implementato il "doppio-click seleziona tutto", mi sono accorto che sarebbe stato opportuno segnalare questa comodità al 'potenziale' visitatore!

Ho pensato quindi che sarebbe stato comodo mostrare una nota a fianco al cursore del mouse quando questo fosse stato sopra del codice!

Questa l'idea, il problema era realizzarla vista la mia scarsa conoscenza dei layer di html...
Ma gira che ti rigira, ho capito che avrei potuto fare a meno di questi famigerati layer, anzi con l'inimitabile tag <div> e qualche riga di javascript, avrei ottenuto il risultato desiderato! C'è da dire che anche i CSS hanno fatto la loro parte!
Ecco come ho risolto!

All'interno del post ho inserito un tag <div> "invisibile":

<div id="myLayer" style="
position: absolute; z-index: 1;
-moz-opacity:0.4; filter:alpha(opacity=40);
border: 0px none #000000; font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333; width: 120px; height: 39px;
background: no-repeat url(background_url); visibility: hidden;
padding: 1px 0px 0px 0px;">

Testo da mostrare nella nota
</div>

L'invisibilità si ottiene impostando l'omonima proprietà visibility dell'attributo style su hidden. Grazie alle proprietà -moz-opacity e filter: alpha(opacity = ...) si può impostare il valore di trasparenza del tag <div>, la prima serve per firefox, la seconda per internet explorer... Altra proprietà molto importante per il mio scopo è position, che impostato a absolute, permette di posizionare il tag secondo coordinate assolute riferite ai bordi alla pagina. Le coordinate, e quindi la posizione, si definiscono tramite le proprietà left e top che permettono di impostare la distanza dal bordo sinistro e da quello superiore della pagina.

Per la parte dinamica mi sono affidato a javascript, impostando tramite gli attributi onMouseOver e onMouseOut la modifica della visibilità del tag <div>:

function M_Out(){
 document.getElementById("myLayer").style.visibility = "hidden";
}

function M_Over() {
 document.getElementById("myLayer").innerHTML = "<center><b>Doppio Click per<br>selezionare tutto!</b></center>";
 document.getElementById("myLayer").style.visibility = "visible";
}

Per lo spostamento della nota legato al movimento del cursore del mouse ho utilizzato l'attributo onMouseMove:

onMouseMove = 
'document.getElementById("myLayer").style.left=event.clientX+window.pageXOffset+10+"px"; 
document.getElementById("myLayer").style.top=event.clientY+window.pageYOffset+10+"px";'

impostando dinamicamente i valori delle proprietà top e left.

Il risultato lo potete ammirare passando il mouse sopra al codice!

Spero vi possa tornare utile!
Ciao,
Andrea