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

Question

Exemple :

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

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

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

Answer 1

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>

Answer 2

Grâce à CSS3, il est désormais possible de donner un style à l'écran de l'utilisateur. title assez facilement en utilisant la propriété content. Voici une courte démonstration :

CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -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, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Démo http://jsfiddle.net/tDQWN/

Answer 3

Les CSS ne peuvent pas modifier l'apparence de l'infobulle. Elle dépend du navigateur et du système d'exploitation. Si vous voulez quelque chose de différent, vous devrez utiliser Javascript pour générer des balises lorsque vous survolez l'élément au lieu de l'infobulle par défaut.

Answer 4

J'ai pensé poster ici ma solution JavaScript en 20 lignes. Elle n'est pas parfaite, mais peut être utile pour certains en fonction de ce que vous attendez de vos infobulles.

Quand l'utiliser

• Styliser automatiquement l'infobulle de tous les éléments HTML avec un nom de domaine de type TITLE défini (ceci inclut les éléments ajoutés dynamiquement au document dans le futur)
• Aucun changement ou bidouillage Javascript/HTML n'est nécessaire pour chaque infobulle (seulement le bouton TITLE attribut, sémantiquement clair)
• Très léger (ajoute environ 300 octets gzippés et minifiés)
• Vous ne voulez qu'une info-bulle stylisée très basique.

Quand ne pas utiliser

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

Personnalisez

Vous pouvez modifier le var 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 donner un style à vos infobulles en utilisant le CSS suivant :

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

Answer 5

Je recommanderais une infobulle en javascript. J'ai souvent utilisé l'infobulle de Zorn et j'aime sa flexibilité : http://www.walterzorn.de/en/tooltip/tooltip_e.htm

Il existe également des options jQuery si vous êtes plus à l'aise : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/