Wie füge ich einem span-Element einen Tooltip hinzu?

Im folgenden Code soll ein Tooltip angezeigt werden, wenn der Benutzer den Mauszeiger über den Bereich bewegt. Wie kann ich das tun? Ich möchte keine Links verwenden.

<code><span> text </span>
</code>

Antworten auf die Frage(5)

das"title" Das Attribut wird vom Browser als Text für die QuickInfo verwendet, wenn Sie einen Stil anwenden möchtenPlugins

In den meisten Browsern wird das title-Attribut als QuickInfo dargestellt und ist im Allgemeinen flexibel in Bezug auf die Art der Elemente, mit denen es funktioniert.

<code><span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">
</code>

Alle diese Elemente rendern QuickInfos in den meisten Browsern.

Lösung für das Problem

Hier ist der einfache, eingebaute Weg:

<code><span title="My tip">text</span>
</code>

Dadurch erhalten Sie QuickInfos mit einfachem Text. Wenn Sie umfangreiche QuickInfos mit formatiertem HTML-Code benötigen, müssen Sie hierfür eine Bibliothek verwenden. Glücklicherweisees gibt jede Menge davon.

 Félix José Hernández03. Nov. 2017, 15:16
funktioniert auch mit 'div'
 RichieHindle20. März 2013, 16:22
@jonathan: Es ist seit mindestens HTML4 Standard:w3.org/TR/html4/struct/global.html#adef-title
 Augiwan23. Jan. 2013, 14:50
Danke vielmals.! Aber ich habe nur tipsy.js verwendet und es sieht besser aus als das, was ich wollte. : D Und dieser Artikel hat zu meiner Verwirrung beigetragen:htmlgoodies.com/tutorials/html_401/article.php/3479661/… wo steht, dass der Tooltip für den "Text" funktioniert
 Augiwan23. Jan. 2013, 12:42
Seltsam! Es funktioniert in JSFiddle, aber nicht in meiner App!
 Jonathan20. März 2013, 14:34
Hallo, kann jemand klären, ob dies in einigen / allen HTML-Versionen Standard ist?
 Augiwan23. Jan. 2013, 10:58
Funktioniert dies jedoch, wenn der Bereich keinen Text enthält? Sagen Sie zum Beispiel eine leere Spanne mit einem bg-Bild?
 RichieHindle23. Jan. 2013, 13:13
@UGS: Sind Sie sicher, dass Ihr Element die Größe hat, für die Sie es halten? Versuchen Sie es mit einem rosa Hintergrund wie meinem. :-)
 RichieHindle23. Jan. 2013, 11:53

Für den grundlegenden Tooltip möchten Sie:

<code><span title="This is my tooltip"> Hover on me to see tooltip! </span></code>

Benutzerdefinierte Tooltips mit reinem CSS - kein JavaScript erforderlich:Beispiel hier (mit Code) / Vollbild Beispiel

Als Alternative zum Standardtitle Mit Attribut-Tooltips können Sie Ihre eigenen benutzerdefinierten CSS-Tooltips erstellen:before/:after Pseudoelemente und HTML5data-* Attribute.

Mit dem bereitgestellten CSS können Sie einem Element einen Tooltip hinzufügendata-tooltip Attribut.

Sie können die Position des benutzerdefinierten Tooltips auch mit der Taste steuerndata-tooltip-position Attribut (akzeptierte Werte:top/right/bottom/left).

Im Folgenden wird beispielsweise ein Tooltop hinzugefügt, der sich am unteren Rand des span-Elements befindet.

<code><span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
</code>

Wie funktioniert das?

Sie können die benutzerdefinierten QuickInfos mit Pseudoelementen anzeigen, indem Sie die benutzerdefinierten Attributwerte mithilfe von abrufenattr() Funktion.

<code>[data-tooltip]:before {
    content: attr(data-tooltip);
}
</code>

Um den Tooltip zu positionieren, verwenden Sie einfach denAttributauswahl und ändern Sie die Platzierung basierend auf dem Wert des Attributs.

Beispiel hier (mit Code) / Vollbild Beispiel

Vollständiges CSS, das im Beispiel verwendet wird - Passen Sie dies an Ihre Bedürfnisse an.

<code>[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}
</code>
 SearchForKnowledge12. März 2015, 15:06
Das war großartig, außer dass es in IE10 nicht funktioniert: /
 SearchForKnowledge12. März 2015, 15:14
Ja, ich habe es gerade getestet und war auch nicht überrascht, dass es nicht funktioniert hat. Guter alter IE! ;)
 JIBIN BJ05. Jan. 2017, 09:35
@ JoshCrozier es hat sehr geholfen
 Josh Crozier12. März 2015, 15:07
@SearchForKnowledge Wirklich? Ich werde das irgendwann untersuchen. Vielen Dank.

Ihre Antwort auf die Frage