Wie kann ich einen Wagenrücklauf in einem HTML-Tooltip verwenden?

Ich füge unserer Website derzeit ausführliche Tooltips hinzu und möchte (ohne auf ein Whiz-Bang-jQuery-Plugin zurückgreifen zu müssen, ich weiß, dass es viele gibt!) Wagenrückläufe zum Formatieren des Tooltips verwenden.

Um den Tipp hinzuzufügen, verwende ich das titleAttribut. Ich habe mich auf den üblichen Websites umgesehen und die grundlegende Vorlage verwendet:

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

Ich habe versucht, das ?durch zu ersetzen :

• <br />
• &013; / 

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

Keines der oben genannten funktioniert. Ist es möglich?

Es ist so einfach, dass Sie sich selbst treten ... drücken Sie einfach die Eingabetaste!

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

Firefox zeigt jedoch überhaupt keine mehrzeiligen Tooltips an - es ersetzt die Zeilenumbrüche durch nichts.

Die neueste Spezifikation erlaubt Zeilenvorschubzeichen, sodass ein einfacher Zeilenumbruch innerhalb des Attributs oder der Entität 
(beachten Sie, dass Zeichen #und ;erforderlich sind) in Ordnung ist.

Versuchen Sie es mit Charakter 10. In Firefox funktioniert es jedoch nicht. :(

Der Text wird (wenn überhaupt) browserabhängig angezeigt. Kleine Tooltips funktionieren in den meisten Browsern. Lange QuickInfos und Zeilenumbrüche funktionieren in IE und Safari (verwenden 
oder 
für eine neue Zeile). Firefox und Opera unterstützen keine Zeilenumbrüche. Firefox unterstützt keine langen Tooltips.

http://modp.com/wiki/htmltitletooltips

Aktualisieren:

Ab Januar 2015 unterstützt Firefox das 
Einfügen eines Zeilenumbruchs in ein HTML- titleAttribut. Siehe das folgende Snippet-Beispiel.

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

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



Funktioniert in allen ...

Erwähnenswert auch, wenn Sie das title-Attribut mit Javascript wie folgt festlegen:

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

Es wird nicht funktionieren. Sie müssen diese ASCII-Dezimalzahl 10 durch eine ASCII-Hexadezimalzahl A ersetzen, so wie sie mit Javascript maskiert ist. So was:

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

Ab Firefox 12 unterstützen sie jetzt Zeilenumbrüche mithilfe der Zeilenvorschub-HTML-Entität: 


<span title="First line&#10;Second line">Test</span>

Dies funktioniert im IE und ist gemäß der HTML5-Spezifikation für das title-Attribut korrekt .

Wenn Sie jQuery verwenden:

$(td).attr("title", "One \n Two \n Three");

wird funktionieren.

getestet in IE-9: funktioniert.

Als Beitrag zur 
Lösung können wir auch &#009Registerkarten verwenden, wenn Sie jemals so etwas tun müssen.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo


 funktioniert auf allen Hauptbrowsern (IE eingeschlossen)

Ich weiß, dass ich zu spät zur Party komme, aber für diejenigen, die nur sehen möchten, dass dies funktioniert, hier eine Demo: http://jsfiddle.net/rzea/vsp6840b/3/

Verwendetes HTML:

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

Ich glaube nicht, dass es so ist. Firefox 2 schneidet ohnehin lange Link-Titel ab und sie sollten eigentlich nur verwendet werden, um eine kleine Menge Hilfetext zu übermitteln. Wenn Sie mehr Erklärungstext benötigen, würde ich vorschlagen, dass er in einen Absatz gehört, der dem Link zugeordnet ist. Sie können dann den Tooltip-Javascript-Code hinzufügen, um diese Absätze auszublenden und sie beim Hover als Tooltips anzuzeigen. Das ist die beste Wahl, damit es browserübergreifend funktioniert.


 <----- Dies ist der Text, der zum Einfügen von Carry Return benötigt wird.

In Chrome 16 und möglicherweise früheren Versionen können Sie "\ n" verwenden. Als Nebenbemerkung funktioniert "\ t" auch

Wir hatten eine Anforderung, bei der wir all dies testen mussten. Hier ist, was ich teilen möchte

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/>

Geige

Funktioniert auf Chrome 79 
nicht mehr.

Ich war erfolgreich mit:




Dies funktioniert in allen gängigen Browsern.

Für wen Sie 
nicht gearbeitet haben, müssen Sie das Element, auf dem Linien sichtbar sind, wie folgt gestalten:white-space: pre-line;

Aus dieser Antwort geht hervor: https://stackoverflow.com/a/17172412/1460591

Verwenden Sie einfach dies:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

Sie können dem Titel eine neue Zeile hinzufügen &#x0a.

Verwenden Sie einfach JavaScript. Dann kompatibel mit den meisten und älteren Browsern. Verwenden Sie die Escape-Sequenz \ n für Zeilenumbrüche.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

Dies 
sollte funktionieren, wenn Sie nur ein einfaches Titelattribut verwenden.

Verwenden Sie bei Bootstrap-Popovers einfach data-html="true" HTML im data-contentAttribut.

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

Aus den verfügbaren Informationen zur Barrierefreiheit und der Verwendung von Tooltips, die sie durch die Verwendung von CR oder Zeilenumbruch vergrößern, geht hervor, dass die verschiedenen Browser sich nicht auf Grundlagen einigen können / wollen, zeigt, dass ihnen die Barrierefreiheit nicht besonders wichtig ist.

Laut diesem Artikel auf der w3c-Website :

CDATA ist eine Folge von Zeichen aus dem Dokumentzeichensatz und kann Zeichenentitäten enthalten. Benutzeragenten sollten Attributwerte wie folgt interpretieren:

• Ersetzen Sie Zeichenentitäten durch Zeichen.
• Zeilenvorschübe ignorieren,
• Ersetzen Sie jeden Wagenrücklauf oder jede Lasche durch ein einzelnes Leerzeichen.

Dies bedeutet, dass (zumindest) CR und LF innerhalb des title-Attributs nicht funktionieren. Ich schlage vor, dass Sie ein Tooltip-Plugin verwenden. Mit den meisten dieser Plugins kann beliebiges HTML als Tooltip eines Elements angezeigt werden.

Viel besser aussehende Tooltips können manuell erstellt werden und HTML-Formatierungen enthalten.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

Dies ist dem Beitrag von w3schools zu diesem Thema entnommen . Experimentieren Sie hier mit dem obigen Code .

Rasiermessersyntax

Im Fall von ASP.NET MVC können Sie den Titel einfach als Variable als Verwendung speichern \r\nund es wird funktionieren.

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

Hack funktioniert aber - (auf Chrome und Mobile getestet)

Fügen Sie einfach keine Unterbrechungszeichen hinzu, bis es unterbrochen wird. Möglicherweise müssen Sie die Größe der QuickInfos abhängig von der Menge des Inhalts begrenzen. Bei kleinen Textnachrichten funktioniert dies jedoch:

   etc

Versuchte alles oben und dies ist das einzige, was für mich funktioniert hat -

Ich habe mit "" versucht, Titeltext in einer neuen Zeile anzuzeigen, und es funktioniert wie ein Zauber

Ich bin auf Firefox 68.7.0esr und das 
funktioniert nicht. Das Brechen der Zeilen über <CR>hat funktioniert, also gehe ich damit um, da es einfach und vorwärts ist. dh

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

verwenden data-html="true"und anwenden <br>.