Tooltips für Button

292

Ist es möglich, einen Tooltip für eine HTML-Schaltfläche zu erstellen? Es ist die normale HTML-Schaltfläche und es gibt kein Title-Attribut, da es für einige HTML-Steuerelemente vorhanden ist. Irgendwelche Gedanken oder Kommentare?

html button tooltip SARAVAN
quelle

Antworten:

559

Fügen Sie einfach ein titlezu Ihrem hinzu button.

<button title="Hello World!">Sample Button</button>
Erweitern Sie das Snippet

Muad'Dib
quelle
9
@EduardLuca, In meinem Fall funktioniert der Tooltip wirklich nicht für disabledSchaltflächen, da Bootstrap pointer-events: nonefür den deaktivierten Status festgelegt ist. Es sollte funktionieren, wenn es pointer-events: autodirekt auf das Element gesetzt ist.
Vitaliy Alekask
Es ist auch so, dass der Tooltip darauf abzielt, unten zu zeigen, wo sich die Maus befindet. Befindet sich das Zielelement unten rechts auf dem Bildschirm, wird der Tooltip über den Mauszeiger verschoben. Allgemeiner: Die Position des Trinkgeldes ist manchmal nicht klug ... aber ich denke, das sind dann nur die Browser.
Gideon
1
Es gibt Situationen, in denen QuickInfos erforderlich sind. Es ist jedoch wichtig, dass Sie Ihre Benutzerbasis berücksichtigen, wenn Sie die in dieser Antwort verwendete Methode verwenden. Ich habe das titleAttribut zum Anzeigen einer Tastenkombination für eine Schaltfläche verwendet, da keine Tastenkombinationen erforderlich sind und nur Touch-Geräte keine Tastaturen verwenden.
Dave F
Aber dies zeigt keinen Tooltip, wenn Sie die Taste mit der Tastatur fokussieren. Gibt es einen anderen Trick, um damit umzugehen? Ich denke, das ist ein Problem mit der Barrierefreiheit, oder?
Nikhil
Referenz: HTML Living Standard 3.2.6.1 Das title-Attribut .
Ludovic Kuty
43

beide <button>markieren und <input type="button">akzeptieren ein Titelattribut.

Gabriele Petrioli
quelle
Was ist mit einfachen HTML-Links, die <a>und verwenden href?
Aaron Franke
1
@ AaronFranke yes- aTags sowie alle Tags unterstützen das titleAttribut. Siehe developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli
12

Verwenden Sie titleAttribut. Es ist ein Standard-HTML-Attribut und wird von den meisten Desktop-Browsern standardmäßig in einer QuickInfo gerendert.

Himmelmann
quelle
Das Problem, das ich gerade lese, zeigt jedoch, dass das title-Attribut von vielen mobilen Browsern nicht vollständig unterstützt wird. Ich recherchiere derzeit auch dies für einige ADA-Probleme und es scheint nur ein wenig unterstützt zu werden.
Isaac Wetter
3
@isaacweathers Nun, wie würden Sie überhaupt in einem mobilen Browser "schweben", um den Titel anzuzeigen?
mbomb007
@ mbomb007 -: Der Fokusstatus auf iOS mit Voiceover liegt ungefähr so ​​nahe wie möglich am Hover-Attribut.
Isaac Wetter
Links sind fantastisch, aber sie sollten niemals die einzige Information in Ihrer Antwort sein. Wenn jemand auf Stack Exchange geht, sollte die Frage "Antwort" tatsächlich eine Antwort enthalten. Nicht nur eine Reihe von Anweisungen zur Antwort.
Erik Philips
10

Für alle hier, die eine verrückte Lösung suchen , versuchen Sie es einfach

title="your-tooltip-here"

in jedem Tag . Ich habe in td's und a' s getestet und es funktioniert ziemlich.

Davidson Lima
quelle
2
@krillgar, ich gab eine allgemeine Lösung, die nicht nur mit Button, sondern auch mit anderen Tags funktioniert . Meine Absicht war es, diese Möglichkeit zu verstärken.
Davidson Lima
3
In Bezug auf Ihren letzten Kommentar war es bereits die Antwort von Skyman vor Jahren.
Pac0
2

Eine Schaltfläche akzeptiert ein "Titel" -Attribut. Sie können ihm dann den Wert zuweisen, mit dem eine Beschriftung angezeigt werden soll, wenn Sie mit der Maus über die Schaltfläche fahren.

<button type="submit" title="Login">
Login</button>
Erweitern Sie das Snippet

Félix Urrutia
quelle
1

Das title-Attribut soll weitere Informationen geben. Es ist nicht nützlich für SEO, daher ist es nie eine gute Idee, den gleichen Text im Titel und Alt zu haben, der das Bild oder die Eingabe beschreiben soll, im Vergleich zu dem, was es tut. zum Beispiel:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

Das title-Attribut ist ein Tooltip, wird jedoch vom Browser so weit gesteuert, wie es angezeigt wird und wie es aussieht. Wenn Sie mehr Kontrolle wünschen, gibt es jQuery-Optionen von Drittanbietern, viele CSS-Vorlagen wie Bootstrap haben integrierte Lösungen, und Sie können auch eine einfache CSS-Lösung schreiben, wenn Sie möchten. Schauen Sie sich diese w3schools-Lösung an .

AU Crawford
quelle
-1

Sie sollten sowohl title- als auch alt- Attribute verwenden, damit es in allen Browsern funktioniert.

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Sergey Gurin
quelle
1
Warum sollten Sie beide verwenden?
Andrei Cioara
weil einige Browser das Alt-Attribut und einen Titel verwenden
Sergey Gurin
5
Unsinn. Das altAttribut ist nur gültig für img, input type="image"und areaTags.
Bitbitdecker