Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Tooltip

Link copiato negli appunti

Quella che proproniamo questa settimana è un'altra variante delle tante tecniche con cui è possibile creare piccoli box descrittivi (tooltip) dei link presenti in una pagina web. Sono in pratica un'alternativa personalizzabile nella grafica all'elemento <title>, con il suo monotono giallino. La tecnica è accomunata ad altre per la combinazione tra Javascript e CSS; se ne differenzia per la gestione del posizionamento del tooltip rispetto al link. La visualizzazione dell'esempio allegato vale più di tante vane parole. Lo script è tratto da Dynamicdrive.com.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

La parte Javascript va inserita nel corpo della pagina, ovvero tra <body> e </body>.Per non creare confusione nel codice la posizione migliore è proprio immediatamente prima del tag </body> (come nell'esempio). Non riportiamo qui l'intera porzione di codice. In realtà lo script può essere lasciato così com'è, parte un paio di variabili all'inizio:

var offsetxpoint=-60 //Posizione del tooltip in orizzontale rispetto al link
var offsetypoint=20 //Posizione del tooltip in verticale rispetto al link

I valori si intendono in pixel. Basterà qualche prova su link presenti nelle varie posizioni della pagina per capire se i valori di default vanno bene o procurano problemi nella visualizzazione dei contenuti circostanti.

## 2: LA SEZIONE CSS

Per la personalizzazione dell'aspetto grafico del tooltip, invece, è fondamentale prestare attenzione alla parte CSS. L'esempio contiene una dichiarazione per il div con id '#dhtmltooltip' presente nella pagina (lo vedremo dopo):

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

Tutte le regole, quelle relative ai colori, alo sfondo, alla larghezza, etc, possono essere modificate a piacere, ma non quella sulla posizione. La proprietà position deve essere impostata su absolute. L'ultima riga, subito dopo il commento, si applica solo a Internet Explorer e consente l'applicazione di un effetto drop-shadow al tooltip. Se si vuole eliminarlo basta cancellare l'ultima riga.

## 3: RICHIAMO INTERNO ALLA PAGINA WEB

All'interno della pagina dovremmo innanzitutto piazzare (in qualunque posizione) un div vuoto con id 'dhtmltooltip'. È quello che sarà poi riempito dal testo che desideriamo far comparire quando il mouse passa sopra il link:

<div id="dhtmltooltip"></div>

L'attivazione del tooltip avviene associando ai link che desideriamo il richiamo alla funzione 'ddrivetip':

<p><a href="http://www.html.it" onMouseover="ddrivetip('Il sito italiano sul web publishing')";
onMouseout="hideddrivetip()">HTML.it</a></p>

L'evento è onmouseover, il parametro da passare (tra parentesi e apici singoli) è il testo del tooltip. L'evento onmouseout, invece, richiama la funzione 'hideddrivetip' che nasconde il tooltip.

Ti consigliamo anche