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


 <----- Dies ist der Text, der benötigt wird, um einen Wagenrücklauf einzufügen.

Answer 2

Wir hatten eine Anforderung, bei der wir all dies testen mussten, und das möchte ich hier mitteilen:

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>

<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>

<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Fiddle

Answer 3

Hier ist eine Demo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML verwendet:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>

Answer 4

Diese 
 sollte funktionieren, wenn Sie nur eine einfache Titel Attribut.

Auf Bootstrap Popovers, verwenden Sie einfach data-html="true" und verwenden Sie HTML in der data-content Attribut.

<div title="Hello &#013;World">hover here</div>

Answer 5

Für wen 
 nicht funktioniert hat, müssen Sie das Element, auf dem die Linien sichtbar sind, in as: white-space: pre-line;

Sie wird referenziert von GuitarWorker's Antwort auf Zeilenumbruch in Tooltips hinzufügen .