.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(gloss);
  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" gloss="Text shown on hovering">Exposed text</a>

Antwoord 6, Autoriteit 8%

Ik dacht dat ik mijn 20 regels JavaScript-oplossing hier zou plaatsen. Het is niet perfect, maar kan voor sommigen nuttig zijn, afhankelijk van wat je nodig hebt via je tooltips.

wanneer u het gebruikt

• Stijlen automatisch de tooltip voor alle HTML-elementen met een titleAttribuut gedefinieerd (dit omvat elementen die in de toekomst dynamisch aan het document zijn toegevoegd)
• No JavaScript / HTML-wijzigingen of hacks vereist voor elke tooltip (alleen de titleattribuut, semantisch helder)
• ZEER LICHT (voegt ongeveer 300 bytes en gedimideerd toe)
• U wilt alleen een zeer standaard stijlvolle tooltip

wanneer u niet wilt gebruiken

• vereist jQuery, dus niet gebruiken als u jQuery

niet gebruikt

• Slechte ondersteuning voor geneste elementen die beide tooltips

hebben

• U hebt tegelijkertijd meer dan één tooltip op het scherm nodig
• Je hebt de tooltip nodig om na enige tijd te verdwijnen

de 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); }
}());

Plak het overal, het zou moeten werken, zelfs als je deze code uitvoert voordat de DOM klaar is (het toont alleen je tooltips totdat DOM klaar is).

Aanpassen

Je kunt de var-declaraties op de tweede regel wijzigen om deze een beetje aan te passen.

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

Stijl

U kunt uw knopinfo nu opmaken met de volgende CSS:

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

Antwoord 7, autoriteit 4%

Een jsfiddle voor aangepast knopinfopatroon is Hier

Het is gebaseerd op CSS-positionering en pseduo-klassekiezers

Controleer MDN-documentenvoor ondersteuning voor meerdere browsers van pseudo-klassen

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

Antwoord 8, Autoriteit 3%

Native Tooltip kan niet worden gestyled.

Dat gezegd hebbende, kunt u wat bibliotheek gebruiken die stijlen drijvende lagen tonen wanneer het element wordt geoefend (in plaats van de inheemse tooltips, en ze onderdrukt) die weinig of geen code-modificaties vereisen …

Antwoord 9

U kunt de standaard browser-tooltip niet stylen. Maar u kunt JavaScript gebruiken om uw eigen aangepaste HTML-tooltips te maken.

Antwoord 10

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

Dit werkt ook met elk attribuut dat u bijvoorbeeld wilt toevoegen:

HTML

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

CSS

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

Zie het werken op: http://jsfidddle.net/vackwe/1/