Come creare tooltip usando CSS3

Suggerimenti o tooltip sono un ottimo modo per visualizzare informazioni aggiuntive con un semplice passaggio del cursore del mouse sul testo o immagine. Essi possono essere utilizzati ad esempio, per aggiungere una descrizione ad immagini, spiegare meglio link, o mostrare atraverso esso qualsiasi altra informazione che possa essere utile per tuo utente. utilizzo di tooltip non prevede qualsiasi ulteriore modificare del sito.

  

In questa lezione vedremo come creare un semplice suggerimento utilizzando HTML e CSS, che visualizzerà il contenuto dell'attributo title del link.

1. La struttura HTML del toltip

Creare un semplice markup per un link. Definiamo l'attributo del title, che conterrà il testo di toltip, e la classe:

<atitle="testo di suggerimento." class="tooltip">Link della pagina</a>

Definiamo lo stile di base per la classe tooltip:

 
.tooltip{
   display: inline;
   position: relative;
}

2. Arrotondimo il nostro suggerimento con CSS

Ora il suggerimento o tooltip, come si chima in inglese, verrà visualizzato in una singola linea con il link, con aiuto di posizionamento relativo. Ora definiamo gli angoli arrotondati per il nostro suggerimento e posizioniamolo sopra il link:

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
 
}

3. Utilizzo del pseudo classe hover:per visualizzaione tooltip

Noi usiamo la pseudo-classe: hover, che seleziona un elemento quando si passa il cursore del mouse, e la pseudo-classe: afte, che aggiunge un contenuto sopra l'elemento selezionato. Sfondo impostato in parte trasparente, e per i browser che non supportano formato colore RGBA, impostare il colore di sfondo grigio. Angoli arrotondati sono creati utilizzando l'attributo border-radius. Il colore del testo e bianco. Infine, posizionare il bloco di suggerimento, e aggiungiamo imbottitura.

4.Specifichimo il contenuto del suggerimento.

Oltre a definire stili e posizionamento, specificiamo la proprietà di content:

content: attr(title);

Questa funzione ti permette di inserire il contenuto, che può essere una frase o un attributo dell'elemento. In questo caso si usa l'attributo title del link.
Ora, quando si posiziona il mouse sopra il link il nostro suggerimento viene visualizzato nella parte superiore. Ma c'è un problema - si presenta due volte: nel nostro suggerimento e dal browser stesso . Per eliminare dobiamo cambiare il nostro codice HTML:

<ahref="#" title="Iserire Qui Informazione che volete aggiungere.."><spantitle="Informazione che volete aggiungere.">Link della pagina </span></a>

Abbiamo messo il tag link nel tag span con il nostro attributo di title. Ora, il browser visualizzerà il contenuto dell'attributo title del tag span, quando il mouse vvera posizionato sopra il link.

5. Ultimi ritochi.

Per completare vedimo di aggiungere la freccia in basso realizzato con css. Usiamo la pseudo-classe: before e il stile per il box:

.tooltip:hover:before{
   border: solid;
   border-color: #333 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 20px;
   content: "";
   left: 50%;
   position: absolute;
   z-index: 99;
}

 

Per creare la nostra freccia, abbiamo usato un trucco con la struttura: impostare il colore trasparente della cornice sulla sinistra e destra e manovriamo con la larghezza del box. Inoltre, la freccia è posizionata sotto il suggerimento.

 

 Vorrei anche aggiungere che lo stesso effeto potremo usare ovunque, basta nel nostro foglio di stile (per esempio nella Joomla o WP) creare una classe e attribuire  questa classe al ellemento schelto.

Letto 2780 volte