Wie kann ich einen Wagenrücklauf in einem HTML Tooltip verwenden?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin derzeit ausführliche Tooltips auf unsere Webseite hinzufügen, und ich möchte (ohne auf eine Whizknall jQuery-Plugin zu müssen, ich weiß, es gibt viele!) Wagen zu verwenden, gibt den Tooltip zu formatieren.
die Spitze hinzuzufügen ich das title Attribut bin mit. Ich habe um die üblichen Standorte gesucht und mit dem Grunde Vorlage von:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
Ich habe versucht, die ? ersetzen mit:
-
<br /> -
&013; / -
\r\n -
Environment.NewLine(Ich bin mit C #)
Keine der oben genannten Arbeiten. Ist es möglich?
Lösung
Es ist so einfach, dass man selbst treten werde ... drücken Sie einfach ein!
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox wird nicht angezeigt mehrzeiligen obwohl gar Tooltips -. Es wird die Zeilenumbrüche mit nichts ersetzen
Andere Tipps
Die neueste Spezifikation ermöglicht Feed Charakterlinie, so dass ein einfacher Zeilenumbruch innerhalb des Attributs oder Entität (beachten Sie, dass Zeichen # und ; erforderlich sind) sind in Ordnung.
Versuchen Charakter 10. Es wird allerdings nicht in Firefox arbeiten. : (
Der Text wird (wenn überhaupt) in einem angezeigten Browser abhängig. Klein Tooltips funktionieren auf den meisten Browsern. Lange Tooltips und Linie Arbeit in IE brechen und Safari (Verwendung
oder für eine neue Newline). Firefox und Opera nicht Unterstützung Zeilenumbrüche. Firefox nicht Unterstützung lange Tooltips.
http://modp.com/wiki/ htmltitletooltips
Update:
Ab Januar 2015 Firefox unterstützt mit einem Zeilenumbruch in einem HTML-title Attribute einzufügen. Sehen Sie das Snippet Beispiel unten.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
Getestet dies in IE, Chrome, Safari, Firefox (neueste Version 2012.11.27):
Funktioniert in allen von ihnen ...
Auch erwähnenswert, wenn Sie den Titel-Attribut mit Javascript wie folgt setzen:
divElement.setAttribute("title", "Line one Line two");
Es wird nicht funktionieren. Sie müssen diese dezimal ASCII ersetzen 10 in eine ASCII-Hexadezimal-A in der Art und Weise es mit Javascript entkommen ist. Wie folgt aus:
divElement.setAttribute("title", "Line one\x0ALine two");
Wie Firefox-12 unterstützen sie nun Zeilenumbrüche die Zeilenvorschub HTML-Entität mit:
<span title="First line Second line">Test</span>
Das funktioniert in IE und ist die richtige gemäß der HTML5-Spezifikation für den title Attribut .
Wenn Sie mit jQuery:
$(td).attr("title", "One \n Two \n Three");
funktioniert.
getestet in IE-9. Arbeits
Als Beitrag zur 
 Lösung können wir auch 	 für Tabs verwenden, wenn Sie jemals so etwas wie dies tun müssen, um.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>
Demo
Ich weiß, ich bin spät, um die Partei, sondern auch für diejenigen, die gerade diese Arbeit sehen wollen, ist hier eine Demo: http://jsfiddle.net/rzea/vsp6840b/3/
HTML verwendet:
<a href="#" title="First Line
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>
funktioniert auf allen Majors Browsern (IE enthalten)
Wir hatten eine Anforderung, wo wir gebraucht alle diese zu testen, hier ist das, 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 Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#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
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>
Ich glaube nicht, es ist. Firefox 2 trimmt langen Link-Titel sowieso und sie sollten wirklich nur dann verwendet werden, um eine kleine Menge von Hilfetext zu vermitteln. Wenn Sie mehr Erklärungstext benötigen würde ich vorschlagen, dass es in einem Absatz gehört mit dem Link verbunden. Sie könnten dann den Tooltip hinzufügen JavaScript-Code, diese Absätze zu verstecken und sie als Tooltips auf schweben zeigen. Das ist die beste Wahl für sie bekommen IMO Cross-Browser zu arbeiten.

 <----- Dies ist der Text benötigt Carry Return einzufügen.
Auf Chrome 16 und möglicherweise frühere Versionen können Sie „\ n“ verwenden. Als Nebenbemerkung, "\ t" funktioniert auch
Wie für die funktionierte nicht das Element, um Stil haben, auf die Linien sichtbar sind als: white-space: pre-line;
von dieser Antwort referenzierte: https://stackoverflow.com/a/17172412/1460591
Verwenden Sie einfach diese:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Sie können die neue Zeile auf Titel hinzufügen, indem Sie diese 
 verwendet wird.
Just JavaScript verwenden. Dann kompatibel mit den meisten und älteren Browsern. Verwenden Sie die Escape-Sequenz \ n für Newline.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
Aus den verfügbaren Informationen über die Zugänglichkeit und die Verwendung von Tooltips sie größer mit der Verwendung von CR oder Zeilenumbruch zu machen versteht sich, die Tatsache, dass die verschiedenen Browser können nicht / nicht auf Grundlagen stimmen zeigt, dass sie nicht viel Sorgfalt dagegen tun Barrierefreiheit.
Nach diesem Artikel auf der W3C-Website :
CDATA ist eine Folge von Zeichen aus dem Dokument-Zeichensatz und kann Charakter Einheiten umfassen. Benutzerprogramme sollten Attribut interpretieren Werte wie folgt:
- Ersetzen Zeichenentität mit Zeichen,
- Ignorieren Zeilenvorschüben
- Ersetzen Sie jeden Wagenrücklauf oder Tab mit einem einzigen Raum.
Das bedeutet, dass (mindestens) CR und LF nicht innerhalb Titelattribut arbeiten. Ich schlage vor, dass Sie ein Tooltip-Plugin verwenden. Die meisten dieser Plugins erlauben beliebiger HTML- als ein Elements Tooltip angezeigt werden.
Dieses 
 sollte funktionieren, wenn Sie nur ein einfaches Titel-Attribut verwenden.
auf Bootstrap popovers, nur data-html="true" verwenden und HTML im data-content Attribute verwenden.
<div title="Hello 
World">hover here</div>
Viel schöner suchen Tooltips manuell erstellt werden kann und die HTML-Formatierung 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 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>
Unter diesem Begriff ist von die w3schools zu diesem Beitrag . Experiment mit dem obigen Code hier .
Razor Syntax
Im Fall von ASP.NET MVC können Sie einfach speichern, den Titel als Variable wie Verwendung \r\n und es wird funktionieren.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
Hack funktioniert aber - (getestet auf Chrom und mobil)
fügen Sie einfach keine Pause Räume, bis es bricht - Sie könnten die Tooltip Größe auf der Menge des Inhalts abhängig beschränken müssen, sondern für kleine Textnachricht dies funktioniert:
etc
Versuchte alles oben und das ist das einzige, was für mich gearbeitet -
Verwendung data-html="true" und gilt <br>.
