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.

     Indice

  1. Markup html
  2. Decorare tooltip
  3. Uso pseudo classe
  4. Contenuto del tooltip
  5. Ultimi ritochi
  6. Tooltip animati, come renderli belli

 

E subito un esempio di che cosa stiamo parlando

Sono la base per toltip passa sopra con il mouse

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;
}

Subbito una premessa: se stai utilizando bootstrap o qualche altro framework potrebbe sucedeere che classe toltip viene usata anche da questo framework e la scritta sara nascosta , allora basta cambiare la classe per esempio . sugerimento o qualche altra

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 stampare a vista il 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 toltip.

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.

 

 6. Toltip animati

E ora vediamo come posiamo trasformare le noiosi toltip neri in qualcosa piu divertente

 

Una piccola raccolta di divertenti suggerimenti (tooltip) implementati in SVG e anime.js.

 

La forma del blocco che contiene  suggerimenti sono fatti in  SVG e l'animazione viene eseguita attraverso lo script anime.js. Il formato SVG consente di convertire liberamente gli oggetti grafici nel nostro caso le figure di vario tipo. Cosi potresti anche tu aggiungere suggerimenti a varie elementi sul tuo sito web e renderli piu piacevoli e divertenti.

 

Per applicare una delle animazione con rispettiva figura ad un elemento sul tuo progetto dovresti collegare alla tua pagina fail di javascript come main.js e anime.js e scegliere dal fail index.html del esempio che potrai scaricare sotto il codice che rappresenta la figura voluta. Vediamo un esempio della sintassi.

<div class="tooltip tooltip--cora" data-type="cora">
<div class="tooltip__trigger" role="tooltip" aria-describedby="info-cora">
<span class="tooltip__trigger-text">Cora</span>
</div>
<div class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 199,21.9 C 152,22.2 109,35.7 78.8,57.4 48,79.1 29,109 29,142 29,172 45.9,201 73.6,222 101,243 140,258 183,260 189,270 200,282 200,282 200,282 211,270 217,260 261,258 299,243 327,222 354,201 371,172 371,142 371,109 352,78.7 321,57 290,35.3 247,21.9 199,21.9 Z"/>
</svg>
<div class="tooltip__content" id="info-cora">Sono suggerimento animato rachiuso nella figura di base!</div>
</div>

E per vedere suggerimenti animati avvicina il tuo puntatore ad una delle frasi sotto

Sono suggerimento animato rachiuso nella figura "Dori".
La tua guida nel costruire un sito web

 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 3007 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso