Comment changer le style de l'attribut title à l'intérieur d'une étiquette d'ancrage?

Voici un exemple de comment le faire:

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

il semble qu'il existe en fait une solution CSS pure, ne nécessitant que l'expression css attr , le contenu généré et les sélecteurs d'attribut (ce qui suggère qu'elle fonctionne aussi loin que IE8):

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Source: https://jsfiddle.net/z42r2vv0/2 /

mise à jour w/ entrée de @ViROscar: veuillez noter qu'il n'est pas nécessaire d'utiliser d'attribut spécifique, bien que j'ai utilisé le attribut " title "dans l'exemple ci-dessus; en fait, ma recommandation serait d'utiliser l'attribut" alt", car il y a une certaine chance que le contenu soit accessible aux utilisateurs incapables de tirer profit de CSS.

update again Je ne change pas le code parce que l'attribut" title "a essentiellement fini par signifier l'attribut "tooltip", et ce n'est probablement pas une bonne idée de cacher du texte important à l'intérieur d'un champ uniquement accessible en stationnaire, mais si vous êtes intéressé en rendant ce texte accessible l'attribut "aria-label" semble comme le meilleur endroit pour lui: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

CSS ne peut pas changer l'apparence tooltip. Il dépend du navigateur / système D'exploitation. Si vous voulez quelque chose de différent, vous devrez utiliser Javascript pour générer un markup lorsque vous survolez l'élément au lieu de l'infobulle par défaut.

j'ai pensé poster ma solution JavaScript de 20 lignes ici. Il n'est pas parfait, mais peut être utile pour certains selon ce que vous avez besoin de vos conseils.

quand l'utiliser

• style automatique le tooltip pour tous les éléments HTML avec un attribut TITLE défini (Cela inclut les éléments dynamiquement ajoutés au document dans le futur)
• aucun changement Javascript / HTML ou hacks requis pour chaque info-bulle (juste le TITLE attribut, sémantiquement clair)
• Très léger (ajoute environ 300 octets au format gzip et minifiés)
• Vous voulez qu'un très basique styleable info-bulle

quand ne pas utiliser

• nécessite jQuery, donc ne pas utiliser si vous n'utilisez pas jQuery
• mauvais support pour les éléments emboîtés que les deux avoir les info-bulles
• vous avez besoin de plus d'une infobulle sur l'écran en même temps
• Vous avez besoin de l'info-bulle pour disparaître après un certain temps

le code

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

collez-le n'importe où, il devrait fonctionner même lorsque vous lancez ce code avant que le DOM soit prêt (il ne montrera pas vos infobulles jusqu'à ce que le DOM soit prêt).

personnaliser

vous pouvez modifier les déclarations var sur la deuxième ligne pour le personnaliser un peu.

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

Style

vous pouvez maintenant coiffer vos tooltips en utilisant le CSS suivant:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

Un jsfiddle pour info-bulle personnalisée motif est Ici

Il est basé sur CSS de Positionnement et de pseduo des sélecteurs de classe

Vérifier MDN docs pour la croix-prise en charge du navigateur de pseudo-classes

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; 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;
}

Vous pouvez pas le style, une véritable title attribut

la façon dont le texte de l'attribut title est affiché est définie par le navigateur et varie d'un navigateur à l'autre. Cependant, vous pouvez créer quelque chose de très similaire en utilisant d'autres attributs.

vous pouvez faire un pseudo-tooltip avec CSS et un attribut personnalisé (par exemple data-title )

pour ça, j'utiliserais un attribut data-title . data-* les attributs sont une méthode pour stocker des données personnalisées dans DOM elements/HTML. Il y a plusieurs façons d'y accéder . Il est important de noter qu'ils peuvent être sélectionnés par CSS.

étant donné que vous pouvez utiliser CSS pour sélectionner des éléments avec les attributs data-title , vous pouvez ensuite utiliser CSS pour créer :after (ou :before ) content qui contient la valeur de attribut utilisant attr() .

exemples D'infobulles de style

plus grand et avec une couleur de fond différente (à la demande de la question):

[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

style plus élaboré (adapté de ce billet de 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

problèmes Connus

contrairement à une vraie" tooltip title , la tooltip produite par les CSS ci-dessus n'est pas nécessairement garantie d'être visible sur la page (c.-à-d. qu'elle pourrait être en dehors de la zone visible). D'un autre côté, il est garanti d'être dans la fenêtre actuelle, ce qui n'est pas le cas pour un véritable tooltip.

^{du code sur le blog lié ci - dessus (que j'ai vu pour la première fois dans une réponse qui l'a plagiée), il m'est apparu évident d'utiliser un attribut data-* au lieu de l'attribut title . Cela a également été suggéré dans un commentaire de snostorm sur cette réponse (maintenant supprimée).}

je recommande un tooltip javascript. J'ai souvent utilisé le tooltip de Zorn et j'aime la flexibilité: http://www.walterzorn.de/en/tooltip/tooltip_e.htm

Il ya aussi quelques options jQuery là-bas si vous êtes plus à l'aise: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

j'ai trouvé la réponse ici: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip /

mon propre code va comme ceci, j'ai changé le nom de l'attribut, si vous maintenez le nom du titre pour l'attribut que vous finissez par avoir deux popups pour le même texte, un autre changement est que mon texte sur le planage affiche sous le texte exposé.

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>

tooltip natif ne peut pas être coiffé.

cela étant dit, Vous pouvez utiliser une bibliothèque qui montrerait des styles de couches flottantes quand l'élément est en vol stationnaire (au lieu des infobulles natives, et les supprimer) nécessitant peu ou pas de modifications de code...

vous ne pouvez pas choisir le style de l'infobulletin par défaut du navigateur. Mais vous pouvez utiliser javascript pour créer vos propres tooltips HTML personnalisés.

a[title="My site"] {
    color: red;
}

cela fonctionne aussi avec n'importe quel attribut que vous voulez ajouter par exemple:

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

Voir le travail à: http://jsfiddle.net/vpYWE/1/