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="text""><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.