Come posso creare descrizioni comandi personalizzate con i css pseudoelements

Sto leggendo css-tricks e alla fine posso vedere il seguente.

Utilizzando HTML5 dati di attributo, quindi tirare che il attributo e
styling come una pseudo elemento, siamo in grado di creare completamente personalizzato
le descrizioni comandi tramite CSS.

Come posso creare descrizioni comandi personalizzate con i css pseudoelements

Il problema è che il link all’interno dell’articolo è morto, e io non sono un buon html/css ragazzo di essere in grado di capire come fare questo. Qualcuno può aiutarmi?

Si può fare come questo accoppiamento. Nota: non ha la freccia in basso, ma che può essere raggiunto con un po ‘ di lavoro in più 🙂
Questo è il non interrotto la versione del link: codepen.io/css-tricks/pen/wFeaG
Questo è un grande sito web per tenere aggiornata.. Qui si può vedere come creare tooltip con i dati di attributo.webdesign.tutsplus.com/articles/….
Aggiunto un risposta canonica qui.

OriginaleL’autore Salvador Dali | 2014-08-09

One Reply
  1. 4

    JSFiddle è qui. Nota: Il contenuto originale è qui.

    HTML

    <p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>

    CSS

    .tooltip {
        display: inline;
        position: relative;
    }
    
    .tooltip:hover {
        color: #c00;
        text-decoration: none;
    }
    
    .tooltip:hover:after {
        background: #111;
        background: rgba(0,0,0,.8);
        border-radius: .5em;
        bottom: 1.35em;
        color: #fff;
        content: attr(title);
        display: block;
        left: 1em;
        padding: .3em 1em;
        position: absolute;
        text-shadow: 0 1px 0 #000;
        white-space: nowrap;
        z-index: 98;
    }
    
    .tooltip:hover:before {
        border: solid;
        border-color: #111 transparent;
        border-color: rgba(0,0,0,.8) transparent;
        border-width: .4em .4em 0 .4em;
        bottom: 1em;
        content: "";
        display: block;
        left: 2em;
        position: absolute;
        z-index: 99;
    }
    Bella soluzione, tuttavia, invece di title attributo che mi piacerebbe utilizzare l’HTML5 attributi dei dati (ad esempio data-title), per evitare che il browser per visualizzare le impostazioni di tooltip.
    Sì, hai ragione.

    OriginaleL’autore Sodbileg Gansukh

Lascia un commento