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
3Beste Antwort7 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
55 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
00 Stimmen

Leider ist der Link zum Plugin nicht mehr funktionstüchtig?

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
07.09.2022 um 03:27

Positiv Negativ
00 Stimmen

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

Positiv Negativ
Antworten
Antworten

Ähnliche Themen

CSS Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

PHP: Eine E-Mail versenden

Tutorial | 0 Kommentare

HTML-Formular mit Daten vorbelegen

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.