Wie kann ich einfach Tooltips auf Symbole in html angezeigt werden?

StackOverflow https://stackoverflow.com/questions/59221

Frage

Ich bin mit ActiveScaffold in Ruby on Rails-Anwendung, und Platz in der Tabelle zu speichern habe ich den Standard „Aktionen“ Text in der Tabelle ersetzt (dh. „Bearbeiten“, „Löschen“, „show“) mit Symbolen mit CSS. Ich habe auch ein paar benutzerdefinierte Aktionen mit action_link.add ( „move“ und „kopieren“).

Aus Gründen der Klarheit Ich möchte ein Tooltip, um mit dem zugehörigen Aktions Pop-up (dh. „Bearbeiten“, „Kopieren“), wenn ich mit der Maus über das Symbol bewegen.

Ich dachte, ich könnte dies tun, eine einfache „alt“ Definition mit dem Tag durch Zugabe, aber das scheint nicht zu funktionieren.

Kann jemand mich in die richtige Richtung?

War es hilfreich?

Lösung

Das alt Attribut ist als Alternative zu dem Bild verwendet werden soll, im Fall des Bildes fehlt, oder in einem Text nur Browser.

IE haben es falsch, wenn sie alt als Tooltip erscheinen gemacht. Es war nie das sein soll.

Das richtige Attribut dafür ist title, was natürlich nicht einen Tooltip in IE macht.

Also, zu tun ein Tooltip haben in beiden IE auftauchen und FireFox / Safari / Chrome / Opera, verwenden sowohl ein alt Attribut und ein title Attribut.

Andere Tipps

Nur ein kleiner Punkt auf diesen Thread hinzuzufügen ... es gibt keinen Alt-Tag oder Titel-Tag. Das alt-Attribut ist für Bilder, sondern auch alle anderen Elemente auf einer Seite können ein Titel-Attribut, das die beste Wahl für Cross-Browser-Kompatibilität ist. 

<span title="Click here to edit the foo">
  Edit
</span>

Sie wollen ein "title" -Tag. Ich bin mir nicht sicher, ob dies mehr notwendig ist, aber ich in der Regel beide alt und Titel-Tags hinzufügen, um alle Browser das Werkzeug sicher, Anzeige der gleichen Spitze.

Die alt-Eigenschaft eines img-Tag funktioniert in einigen Browsern, aber nicht alle (wie einig mozilla-basierte).

Die " richtig ", dies zu tun ist die Titel Eigenschaft verwendet wird.

Tooltips in HTML sind die Inhalte des alt Text für Image-Tags, aber wenn man diese mit CSS sind Einstellung haben Sie wahrscheinlich eine background:url(...); Stil anstelle eines Bildes.

Mit alt auf die Bilder und title auf die Links.

Wie Prestaul wies darauf hin, das Alt-Tag für Bilder und Titel für Links funktionieren soll. Dies ist jedoch auch Browser abhängig ... die meisten Browser sollte implementieren Funktionalität, die diese Metadaten als Tooltips angezeigt, aber sie sind nicht dazu verpflichtet ist.

Die Realisierung, wie Joel Coehoom wies darauf hin, dass mein Symbol tatsächlich ein Hintergrundbild war, habe ich ein transparent.gif Bild mit Titel und Alt-Attribut über Oberseite des Hintergrunds, und voila - Tooltips

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top