Exemple:

<a href="example.com" title="My site"> Link </a>

Comment changer la présentation de l'attribut "title" dans le navigateur?. Par défaut, il a juste un fond jaune et une petite police. Je voudrais l'agrandir et changer la couleur de fond.

Existe-t-il un moyen CSS de styliser l'attribut title?

Voici un exemple de la façon de procéder:

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' attrexpression css , le contenu généré et les sélecteurs d'attribut (ce qui suggère que cela fonctionne aussi loin que IE8):

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

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

mise à jour avec entrée de @ViROscar: veuillez noter qu'il n'est pas nécessaire d'utiliser un attribut spécifique, bien que j'aie utilisé l'attribut "title" dans l'exemple ci-dessus; en fait, ma recommandation serait d'utiliser l'attribut "alt", car il est possible que le contenu soit accessible aux utilisateurs ne pouvant pas bénéficier de CSS.

mettre à jour à nouveau Je ne change pas le code parce que l'attribut "title" signifie essentiellement l'attribut "tooltip", et ce n'est probablement pas une bonne idée de cacher un texte important dans un champ accessible uniquement en survol, mais si vous êtes intéressé à rendre ce texte accessible, l'attribut "aria-label" semble être le meilleur endroit pour cela: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Vous ne pouvez pas styliser un titleattribut réel

La façon dont le texte de l' titleattribut est affiché est définie par le navigateur et varie d'un navigateur à l'autre. Il n'est pas possible pour une page Web d'appliquer un style à l'info-bulle que le navigateur affiche en fonction de l' titleattribut.

Cependant, vous pouvez créer quelque chose de très similaire en utilisant d'autres attributs.

Vous pouvez créer une pseudo-info-bulle avec CSS et un attribut personnalisé (par exemple data-title)

Pour cela, j'utiliserais un data-titleattribut. data-*Les attributs sont une méthode pour stocker des données personnalisées dans des éléments DOM / HTML. Il existe plusieurs façons d'y accéder . Surtout, ils peuvent être sélectionnés par CSS.

Étant donné que vous pouvez utiliser CSS pour sélectionner des éléments avec des data-titleattributs, vous pouvez ensuite utiliser CSS pour créer :after(ou :before) contentqui contient la valeur de l'attribut à l'aide attr().

Exemples d'infobulles stylisées

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 cet article 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 véritable titleinfo-bulle, l'info-bulle produite par le CSS ci-dessus n'est pas nécessairement garantie d'être visible sur la page (c'est-à-dire qu'elle peut être en dehors de la zone visible). En revanche, il est garanti d'être dans la fenêtre courante, ce qui n'est pas le cas pour une info-bulle réelle.

En outre, la pseudo-info-bulle est positionnée par rapport à l'élément qui a la pseudo-info-bulle plutôt que par rapport à l'emplacement de la souris sur cet élément. Vous souhaiterez peut-être affiner l'emplacement d'affichage de la pseudo-info-bulle. Le faire apparaître dans un emplacement connu par rapport à l'élément peut être un avantage ou un inconvénient, selon la situation.

Vous ne pouvez pas utiliser :beforeou :aftersur des éléments qui ne sont pas des conteneurs

Il y a une bonne explication dans cette réponse à "Puis-je utiliser un pseudo-élément: avant ou: après sur un champ de saisie?"

En effet, cela signifie que vous ne pouvez pas utiliser cette méthode directement sur des éléments tels que <input type="text"/>, <textarea/>, <img>, etc. La solution facile est d'envelopper l'élément qui n'est pas un récipient dans un <span>ou <div>et ont la pseudo-infobulle sur le récipient.

Exemples d'utilisation d'une pseudo-info-bulle sur un <span>habillage d'un élément non conteneur:

[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=&quot;text&quot;"><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/>

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

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

Je pensais publier ma solution JavaScript de 20 lignes ici. Ce n'est pas parfait, mais peut être utile pour certains selon ce dont vous avez besoin dans vos info-bulles.

Quand l'utiliser

• Style automatiquement l'info-bulle pour tous les éléments HTML avec un TITLEattribut défini (cela inclut les éléments ajoutés dynamiquement au document à l'avenir)
• Aucun changement ou piratage Javascript / HTML requis pour chaque info-bulle (juste l' TITLEattribut, sémantiquement clair)
• Très léger (ajoute environ 300 octets gzippés et minifiés)
• Vous voulez seulement une info-bulle stylisée très basique

Quand NE PAS utiliser

• Nécessite jQuery, donc ne l'utilisez pas si vous n'utilisez pas jQuery
• Mauvaise prise en charge des éléments imbriqués qui ont tous deux des info-bulles
• Vous avez besoin de plus d'une info-bulle à l'écran en même temps
• Vous avez besoin que l'infobulle disparaisse 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ù, cela devrait fonctionner même lorsque vous exécutez ce code avant que le DOM soit prêt (il ne montrera simplement pas vos info-bulles tant que DOM n'est pas prêt).

Personnaliser

Vous pouvez modifier les vardéclarations sur la deuxième ligne pour la 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 désormais styliser vos info-bulles à l'aide du CSS suivant:

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

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 conservez le nom du titre de l'attribut, vous finissez par avoir deux fenêtres contextuelles pour le même texte, une autre modification est que mon texte en vol stationnaire s'affiche sous le texte exposé.

.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;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

Un jsfiddle pour le modèle d'infobulle personnalisé est ici

Il est basé sur le CSS Positioning et les sélecteurs de classes pseduo

Vérifiez les documents MDN pour la prise en charge multi-navigateur des 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;
}

L'infobulle native ne peut pas être stylisée.

Cela étant dit, vous pouvez utiliser une bibliothèque qui afficherait des styles de couches flottantes lorsque l'élément est survolé (au lieu des info-bulles natives, et les supprimer) nécessitant peu ou pas de modifications de code ...

Vous ne pouvez pas styliser l'info-bulle du navigateur par défaut. Mais vous pouvez utiliser javascript pour créer vos propres info-bulles HTML personnalisées.

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

Cela fonctionne également avec n'importe quel attribut que vous souhaitez ajouter, par exemple:

HTML

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

CSS

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

Voyez-le fonctionner à: http://jsfiddle.net/vpYWE/1/