Ho un elemento di input che ha un attributo title che ovviamente risulta con tooltip con il messaggio del valore dell'attributo.Styling tooltip nativo da title = "testo Tooltip"
Per qualche motivo questo tooltip deve essere abbinato a CSS.
Come può essere fatto? Non so in quale contenitore verrà reso, non ne so nulla. Inoltre, non è possibile accedervi dagli strumenti di sviluppo di Firebug
Sembra che esiste infatti una soluzione CSS pura, che richiede solo l'espressione css attr, il contenuto generato ei selettori di attributo (il che suggerisce che funzioni fino a IE8):
a[title]:hover:after {
content: attr(title);
position: absolute;
}
Fonte: http://jsfiddle.net/tDQWN/
aggiornamento w/input da @ViROscar: si prega di notare che non è necessario utilizzare alcun attributo specifico, anche se ho usato l'attributo "title" nell'esempio di cui sopra ; in realtà la mia raccomandazione sarebbe quella di utilizzare l'attributo "alt", in quanto vi è qualche possibilità che il contenuto sia accessibile agli utenti che non possono beneficiare dei CSS.
aggiornamento nuovamente Non sto cambiando il codice perché l'attributo "title" è sostanzialmente venuto a significare l'attributo "Tooltip", e non è probabilmente una buona idea per nascondere il testo importante all'interno di un campo accessibile solo al passaggio del mouse , ma se siete interessati a fare questo testo accessibile il "-label aria" attributo sembra il posto migliore per esso: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
E se non si desidera visualizzare anche il tooltip nativo, si può sempre usare il tag "alt" .. –
Adoro la tecnica! L'ho provato su un'immagine, sai perché potrebbe non funzionare? http://jsfiddle.net/tDQWN/4058/ – Chris
@ChrisNicholson sì, non funzionerà in questo modo perché le immagini sono tag "void", non possono contenere pseudo-elementi. –
La descrizione comando nativa non può essere formattata.
Detto questo, è possibile utilizzare alcuni biblioteca che avrebbe mostrato stili strati galleggianti quando l'elemento viene aleggiava (invece dei tooltip nativi, e sopprimere) che richiede poco o nessun codice modifiche ...
Non penso che si possano sopprimere i tooltip nativi se un elemento ha un attributo 'title'. Quindi, se imposti la tua implementazione del tooltip, è meglio usare qualche altro attributo (ad esempio, data-tip') invece di 'title'. –
è possibile, se dopo aver allegato all'evento si deseleziona l'attributo titolo – poncha
Vedo il punto, ma non si tratta di stili tooltip nativi; si tratta di evitarli (modificando il DOM). –
Non è possibile stile il suggerimento del browser predefinito. Ma puoi usare javascript per creare i tuoi tooltips HTML personalizzati.
Un jsfiddle testo tooltip personalizzato è Here
Si basa su CSS Posizionamento e pseduo selettori di classe
Controlla MDN docs per il supporto cross-browser di classi pseudo
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
Questo dovrebbe essere positivo :) –
ho trovato la risposta qui: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
mio codice va come questo , Ho cambiato il nome dell'attributo, se si mantiene il nome del titolo per l'attributo si finisce per avere due popup per t Lo stesso testo, un altro cambiamento è che il mio testo sul passaggio del mouse viene visualizzato sotto il testo esposto.
css
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(glose);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
html
<a class="tags" glose="Text shown on hovering">Exposed text</a>
http: // StackOverflow.it/questions/36275678/how-to-create-a-tooltip –