HTML: Zeilenumbruch im title Attribut oder Tooltip
Frage von Consumer | 11.03.2012 um 11:04
Mit folgendem HTML-Code, kann ich einen schönen Tooltip erzeugen, wenn man mit der Maus über das Element fährt:
<img src="pic.jpg" title="Das wird angezeigt.">
Allerdings stoße ich an meine programmiertechnischen Grenzen, sobald ich den Tooltip mehrzeilig machen will. Wie kann man das machen? Ich habe schon so einiges wie <br> oder \n ausprobiert. Aber das funktioniert alles nicht.
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
PHP: Eine E-Mail versenden
Tutorial | 0 Kommentare
jQuery: Data-Attribut-Wert lesen und ändern
Tutorial | 0 Kommentare
HTML: Unterschied zwischen ID und CLASS
Info | 0 Kommentare
MySQL: Zeilenumbrüche in MySQL
Tipp | 0 Kommentare
Textdateien mit fester Zeilenlänge umschreiben
Tutorial | 0 Kommentare
HTML: Kein Zeilenumbruch zwischen bestimmten Worten
Tipp | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Wenn du mit dem Firefox testest, wird es auch nicht funktionieren, egal welche Zeichen du als Zeilenumbruch nimmst. Der Firefox ersetzt alle Zeichen für den Zeilenumbruch wie \r, \n oder \r\n durch ein Leerzeichen. Mit <br> geht es aber gar nicht, da dies nur im HTML-Bereich einen Zeilenumbruch ergibt.
Bei Browsern wie Safari, Google Chrome oder auch dem Internet Explorer kannst du als Zeilenumbruch verwenden. Diese Kombination wird dann als neue Zeile gewertet. Firefox ignoriert aber auch das.
Das liegt daran, dass das title Attribut eher einer kurzen Beschreibung dienen soll als einem langen Text. Manche Browser kürzen sogar das title Attribut und zeigen gar nicht erst die volle Länge an.
Die Lösung für dein Problem ist folgende: Du musst den Tooltip per JavaScript und mouseover anzeigen lassen. Dann kannst du ein eigenes DIV anlegen, bei dem du freie Hand über das Design hast. Wenn du mit der Maus über das jeweilige Element fährst, wird das Tooltip-DIV dann angezeigt. Empfehlen kann ich in dem Zusammenhang zum Beispiel den Tooltip von bassistance.de für jQuery.
11.03.2012 um 20:45
Mittlerweile macht auch Firefox (ich habe aktuell 40.0.3) einen Zeilenumbruch, wenn er ' ' im Text des Tooltips vorfindet.
Allerdings lässt er nur eine bestimmte Maximallänge einer Zeile des Tooltips zu, bricht also längere Zeilen selbst um.
10.09.2015 um 16:42
Leider ist der Link zum Plugin nicht mehr funktionstüchtig?
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
07.09.2022 um 03:27
Habe den Link soeben ausprobiert und bei mir funktioniert er noch. Zwar gibt es noch eine Möglichkeit zum Download, allerdings schreibt der Autor, dass das Plugin nicht mehr supportet wird und man stattdessen das jQuery UI Tooltip Widget verwenden soll, das man hier findet:
https://jqueryui.com/tooltip/
Vielleicht funktionierte der Link bei dir nicht weil du HTTP statt HTTPS verwendet hast.
07.09.2022 um 04:07