Non puoi modellare un titleattributo reale
La modalità di visualizzazione del testo titlenell'attributo è definita dal browser e varia da browser a browser. Non è possibile per una pagina Web applicare uno stile alla descrizione comandi visualizzata dal browser in base titleall'attributo.
Tuttavia, puoi creare qualcosa di molto simile usando altri attributi.
Puoi creare una pseudo-tooltip con CSS e un attributo personalizzato (ad es. data-title)
Per questo, userei un data-titleattributo. data-*gli attributi sono un metodo per archiviare dati personalizzati in elementi DOM / HTML. Esistono diversi modi per accedervi . È importante sottolineare che possono essere selezionati da CSS.
Dato che puoi usare CSS per selezionare elementi con data-titleattributi, puoi quindi usare CSS per creare :after(o :before) contentche contenga il valore dell'attributo usando attr().
Esempi di tooltip con stile
Più grande e con un colore di sfondo diverso (per richiesta):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip
Stile più elaborato (adattato da questo post del blog ):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
position: absolute;
bottom: -1.6em;
left: 100%;
padding: 4px 4px 4px 8px;
color: #222;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip
Problemi noti
A differenza di una vera titledescrizione comandi, la descrizione prodotta dal CSS sopra non è necessariamente garantita per essere visibile sulla pagina (cioè potrebbe essere al di fuori dell'area visibile). D'altra parte, è garantito che si trovi all'interno della finestra corrente, il che non è il caso di una descrizione comando reale.
Inoltre, la pseudo-tooltip è posizionata rispetto all'elemento che ha la pseudo-tooltip piuttosto che rispetto a dove si trova il mouse su quell'elemento. Potresti voler mettere a punto dove viene visualizzato lo pseudo tooltip. Farlo apparire in una posizione nota rispetto all'elemento può essere un vantaggio o uno svantaggio, a seconda della situazione.
Non è possibile utilizzare :beforeo :aftersu elementi che non sono contenitori
C'è una buona spiegazione in questa risposta a "Posso usare uno pseudo-elemento: before o: after su un campo di input?"
In effetti, questo significa che non è possibile utilizzare questo metodo direttamente su elementi come <input type="text"/>, <textarea/>, <img>, ecc La soluzione più semplice è quello di avvolgere l'elemento che non è un contenitore in un <span>o <div>e hanno la pseudo-tooltip sul contenitore.
Esempi di utilizzo di una pseudo-tooltip su un <span>wrapping di un elemento non contenitore:
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.pseudo-tooltip-wrapper {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}
Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type="text""><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>
Dal codice sul post del blog collegato sopra (che ho visto per la prima volta in una risposta che lo ha plagiato), mi è sembrato ovvio usare un data-*attributo anziché l' titleattributo. Ciò è stato anche suggerito in un commento di snostorm su quella risposta (ora eliminata).