Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Question

Ich bin derzeit das Hinzufügen von ausführlichen Tooltips auf unserer Website, und ich möchte (ohne auf eine whizz-bang jQuery-Plugin zurückgreifen, ich weiß, es gibt viele!), um Wagenrücklauf zu verwenden, um die Tooltip-Format.

Um den Tipp hinzuzufügen, verwende ich die title Attribut. Ich habe mich auf den üblichen Websites umgesehen und die Grundvorlage von:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

Ich habe versucht, die ? mit:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Ich verwende C#)

Keine der oben genannten Möglichkeiten funktioniert. Ist das möglich?

Answer 1

Les neueste Spezifikation erlaubt Zeilenvorschubzeichen, so dass ein einfacher Zeilenumbruch innerhalb des Attributs oder der Entität 
 (Beachten Sie, dass die Zeichen # y ; erforderlich sind) sind OK.

Answer 2

Es ist ganz einfach: Drücken Sie einfach Enter !

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

Answer 3

Versuchen Sie Zeichen 10. Bis Januar 2015 hat es in Firefox nicht funktioniert.

Der Text wird (wenn überhaupt) in einem Browser-abhängigen Weise angezeigt. Kleine Tooltips funktionieren in den meisten Browsern. Lange Tooltips und Zeilenumbrüche funktionieren im IE und Safari (verwenden Sie 
 o 
 für eine neuen Zeilenumbruch). Firefox und Opera unterstützen nicht unterstützen keine Zeilenumbrüche. Firefox unterstützt nicht unterstützt keine langen Tooltips.

http://modp.com/wiki/htmltitletooltips

Firefox unterstützt jetzt die Verwendung von 
 um einen Zeilenumbruch in einen HTML-Code einzufügen title Attribut. Siehe das folgende Beispiel.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Answer 4

Getestet in IE, Chrome, Safari, Firefox (letzte Versionen 2012-11-27):



Funktioniert in allen von ihnen...

Answer 5

Erwähnenswert ist auch, dass Sie das Attribut title mit JavaScript wie folgt setzen:

divElement.setAttribute("title", "Line one
Line two");

Es wird nicht funktionieren. Sie müssen die ASCII-Dezimalzahl 10 durch ein ASCII-Hexadezimalzeichen A ersetzen, wie es in JavaScript verwendet wird. Etwa so:

divElement.setAttribute("title", "Line one\x0ALine two");