Beispiel:

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

Wie ändere ich die Darstellung des Attributs "title" im Browser?. Standardmäßig hat es nur einen gelben Hintergrund und eine kleine Schrift. Ich möchte es größer machen und die Hintergrundfarbe ändern.

Gibt es eine CSS-Möglichkeit, das title-Attribut zu formatieren?

Hier ist ein Beispiel dafür:

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>

Es scheint tatsächlich eine reine CSS-Lösung zu geben, die nur den CSS- attrAusdruck, den generierten Inhalt und die Attributselektoren benötigt (was darauf hindeutet, dass sie bereits im IE8 funktioniert):

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

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

Update mit Eingabe von @ViROscar: Bitte beachten Sie, dass kein bestimmtes Attribut verwendet werden muss, obwohl ich im obigen Beispiel das Attribut "title" verwendet habe. Eigentlich würde ich empfehlen, das Attribut "alt" zu verwenden, da die Möglichkeit besteht, dass der Inhalt für Benutzer zugänglich ist, die nicht von CSS profitieren können.

Erneut aktualisieren Ich ändere den Code nicht, da das Attribut "title" im Grunde genommen das Attribut "tooltip" bedeutet und es wahrscheinlich keine gute Idee ist, wichtigen Text in einem Feld zu verbergen, auf das nur mit dem Mauszeiger zugegriffen werden kann, aber wenn Sie es sind Wenn Sie daran interessiert sind, diesen Text zugänglich zu machen, scheint das Attribut "aria-label" der beste Ort dafür zu sein: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Sie können kein tatsächliches titleAttribut formatieren

Wie der Text im titleAttribut angezeigt wird, wird vom Browser festgelegt und variiert von Browser zu Browser. Es ist für eine Webseite nicht möglich, einen Stil auf den Tooltip anzuwenden, den der Browser basierend auf dem titleAttribut anzeigt .

Sie können jedoch mit anderen Attributen etwas sehr Ähnliches erstellen.

Sie können einen pseudo-Tooltip mit CSS machen und ein benutzerdefiniertes Attribut (zB data-title)

Dafür würde ich ein data-titleAttribut verwenden. data-*Attribute sind eine Methode zum Speichern von benutzerdefinierten Daten in DOM-Elementen / HTML. Es gibt mehrere Möglichkeiten, auf sie zuzugreifen . Wichtig ist, dass sie per CSS ausgewählt werden können.

Da Sie mit CSS Elemente mit data-titleAttributen auswählen können, können Sie mit CSS erstellen :after(oder :before) content, das den Wert des Attributs enthält attr().

Beispiele für gestaltete QuickInfos

Größer und mit einer anderen Hintergrundfarbe (auf Anfrage der Frage):

[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

Ausgefeilteres Styling (angepasst aus diesem Blog-Beitrag ):

[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

Bekannte Probleme

Im Gegensatz zu einem echten titleTooltip ist nicht unbedingt garantiert, dass der vom obigen CSS erstellte Tooltip auf der Seite sichtbar ist (dh außerhalb des sichtbaren Bereichs). Auf der anderen Seite wird garantiert, dass es sich innerhalb des aktuellen Fensters befindet, was bei einem tatsächlichen Tooltip nicht der Fall ist.

Außerdem wird der Pseudo-Tooltip relativ zu dem Element positioniert, das den Pseudo-Tooltip enthält, und nicht relativ zu der Position, an der sich die Maus auf diesem Element befindet. Möglicherweise möchten Sie genau festlegen, wo der Pseudo-Tooltip angezeigt wird. Das Erscheinen an einer bekannten Stelle relativ zum Element kann je nach Situation ein Vorteil oder ein Nachteil sein.

Sie können mit nicht :beforeoder :afterauf Elemente , die keine Container sind

Diese Antwort enthält eine gute Erklärung für "Kann ich ein: vor oder: nach dem Pseudoelement in einem Eingabefeld verwenden?"

Effektiv bedeutet dies , dass Sie diese Methode nicht direkt auf Elemente wie verwenden können <input type="text"/>, <textarea/>, <img>etc. Die einfache Lösung ist es, das Element zu wickeln , die in einem kein Container ist <span>oder <div>und hat den pseudo-Tooltip auf den Behälter.

Beispiele für die Verwendung eines Pseudo-Tooltips zum <span>Umschließen eines Nicht-Container-Elements:

[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/>

^{Aus dem Code in dem oben verlinkten Blog-Beitrag (den ich hier zum ersten Mal in einer Antwort gesehen habe, die ihn plagiiert hat) erschien es mir offensichtlich, ein data-*Attribut anstelle des titleAttributs zu verwenden. Dies wurde auch in einem Kommentar von snostorm zu dieser (jetzt gelöschten) Antwort vorgeschlagen.}

CSS kann das Erscheinungsbild der QuickInfos nicht ändern. Es ist browser- / betriebssystemabhängig. Wenn Sie etwas anderes möchten, müssen Sie Javascript verwenden, um Markups zu generieren, wenn Sie den Mauszeiger über das Element anstelle des Standard-Tooltips bewegen.

Ich dachte, ich würde meine 20-Zeilen-JavaScript-Lösung hier veröffentlichen. Es ist nicht perfekt, kann aber für einige nützlich sein, je nachdem, was Sie in Ihren Tooltips benötigen.

Wann man es benutzt

• Formatiert den Tooltip für alle HTML-Elemente automatisch mit einem TITLEdefinierten Attribut (dies schließt Elemente ein, die dem Dokument in Zukunft dynamisch hinzugefügt werden).
• Für jeden Tooltip sind keine Javascript / HTML-Änderungen oder Hacks erforderlich (nur das TITLEAttribut, semantisch klar).
• Sehr leicht (fügt ungefähr 300 Bytes hinzu, die gezippt und minimiert sind)
• Sie möchten nur einen sehr einfachen, stilbaren Tooltip

Wann NICHT verwenden

• Benötigt jQuery, verwenden Sie es also nicht, wenn Sie jQuery nicht verwenden
• Schlechte Unterstützung für verschachtelte Elemente, die beide QuickInfos haben
• Sie benötigen mehr als einen Tooltip gleichzeitig auf dem Bildschirm
• Sie benötigen den Tooltip, um nach einiger Zeit zu verschwinden

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

Fügen Sie es an einer beliebigen Stelle ein. Es sollte auch dann funktionieren, wenn Sie diesen Code ausführen, bevor das DOM fertig ist (Ihre Tooltips werden erst angezeigt, wenn das DOM fertig ist).

Anpassen

Sie können die varDeklarationen in der zweiten Zeile ändern , um sie ein wenig anzupassen.

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

Stil

Sie können Ihre QuickInfos jetzt mit dem folgenden CSS formatieren:

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

Ich habe die Antwort hier gefunden: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Mein eigener Code sieht so aus. Ich habe den Attributnamen geändert. Wenn Sie den Titelnamen für das Attribut beibehalten, haben Sie am Ende zwei Popups für denselben Text. Eine weitere Änderung besteht darin, dass mein Text beim Schweben unter dem exponierten Text angezeigt wird.

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

Eine jsfiddle für ein benutzerdefiniertes Tooltip-Muster finden Sie hier

Es basiert auf CSS-Positionierungs- und Pseduo-Klassenselektoren

Überprüfen Sie die MDN-Dokumente auf browserübergreifende Unterstützung von Pseudoklassen

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

Native Tooltips können nicht gestaltet werden.

Abgesehen davon können Sie eine Bibliothek verwenden, in der schwebende Stilebenen angezeigt werden, wenn das Element bewegt wird (anstelle der nativen QuickInfos, und diese unterdrücken), ohne dass Codeänderungen erforderlich sind.

Sie können den Standard-Browser-Tooltip nicht formatieren. Sie können jedoch Javascript verwenden, um Ihre eigenen benutzerdefinierten HTML-Tooltips zu erstellen.

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

Dies funktioniert auch mit allen Attributen, die Sie hinzufügen möchten, zum Beispiel:

HTML

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

CSS

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

Sehen Sie, wie es funktioniert unter: http://jsfiddle.net/vpYWE/1/