Come si crea un tooltip in html e css

Inserire un elemento testuale o grafico al passaggio del mouse su una determinata parola, un div o altro elemento html.

Come fare?

-

 

 

E' spesso utile far apparire del testo aggiuntivo per descrivere, aggiornare o informare l'utente in una determinata posizione di un testo.

Cosa è un tooltip

Per questo ci viene in aiuto un elemento chiamato tooltip comunemente utilizzato nell'interfaccia grafica attivabile al passaggio del mouse in un testo, un div o altro elemento html

Esistono diversi metodi per utilizzare questa funzione ad esempio utilizzando il framwork di bootstrap dove oltre alle numerose funzioni sono presenti anche i tooltip basati sulla libreria popper.js,

Ma se non intendiamo utilizzare questa libreria, come possiamo creare un tooltip personalizzato?

Tooltip e css

Per creare un tooltip di base possiamo utilizzare alcuni parametri di style in css e html, vediamo lo script:

Il file Style.css

.mio_tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.mio_tooltip .mio_tooltiptext {
    visibility: hidden;
    width: 320px;
    background-color: orange;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Posizione tooltip */
    position: absolute;
    z-index: 1;
}

.mio_tooltip:hover .mio_tooltiptext {
    visibility: visible;
}
 .pad_tooltip{padding:30px !important
}

il nostro html:

<div class=" mio_tooltip">Passa il mouse qui sopra

<span class="mio_tooltiptext">Ciao io sono un tooltip 
<img id="e1" class="img-fluid mb-2" src="https://serreri.com/assets/img/inserire-un-tooltip.jpg"></span>

<span class="mio_tooltiptext">Ciao io sono un tooltip </span> 
 </div>
                     
<div class=" mio_tooltip">Passa il mouse qui sopra
<span class="mio_tooltiptext pad_tooltip"><a href="#">LINK HTTP</a> </span>  
 </div>

All'interno del tooltip è possibile far passare qualsiasi cosa vogliamo, da un codice php, un link html fino a delle immagini a seconda del tipo di messaggio che si vuol far apparire al passaggio del mouse sull'elemento desiderato.

 

Prova anche tu!


   
Css
 


Valerio Bonini
2023-03-14
#107
Si può modificare un Tooltip dall'attributo title?
Lascia un commento