11 Stimme

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.

AntwortenPositivNegativDatumStimmen
1Beste Antwort5 Stimmen

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 &#10; 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

AntwortenPositiv Negativ
33 Stimmen

Mittlerweile macht auch Firefox (ich habe aktuell 40.0.3) einen Zeilenumbruch, wenn er '&#10;' 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

Positiv Negativ
Antworten
Antworten

Ähnliche Themen

CSS Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

PHP: Eine E-Mail versenden

Tutorial | 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.