HTMLツールチップでキャリッジリターンを使用する方法
私は現在私たちのサイトに冗長なツールチップを追加しています、そしてツールチップをフォーマットするためにキャリッジリターンを使用したいのですが（私はたくさんのjQueryプラグインに頼る必要はありません）.
ヒントを追加するために、title属性を使用しています。私はいつものサイトを見回し、次の基本的なテンプレートを使っています。
<a title='Tool?Tip?On?New?Line'>link with tip</a>
?を次のように置き換えてみました。
<br />&013; / \r\nEnvironment.NewLine（私はC＃を使っています）
上記のどれも動作しません。出来ますか？
それはあなたが自分自身を蹴ることは簡単です... enterを押してください！
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefoxは複数行のツールチップをまったく表示しません - 改行を何も置き換えません。
最新の指定 は改行文字を許します、そのため属性や実体 （#と;の文字が必須であること）の内側の単純な改行はOKです。
キャラクター10を試してみてください。Firefoxでは動作しません。 :(
テキストは（あるとしても）ブラウザ依存の方法で表示されます。小さなツールチップはほとんどのブラウザで機能します。長いツールチップと改行はIEとSafariで機能します（新しい改行には
または を使用します）。 FirefoxとOperaは改行をサポートしません。 Firefoxは長いツールチップをサポートしません。
http://modp.com/wiki/htmltitletooltips
更新：
2015年1月現在、FirefoxはHTMLのtitle属性に改行を挿入するための の使用をサポートしています。下記のスニペットの例を参照してください。
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>これをIE、Chrome、Safari、Firefox（最新バージョン2012-11-27）でテストしました。
それらのすべてで動作します...
あなたがこのようにJavascriptでtitle属性を設定しているならば、また言及する価値があります：
divElement.setAttribute("title", "Line one Line two");
うまくいきません。 Javascriptでエスケープする方法で、ASCII decimal 10をASCII hexadecimal Aに置き換える必要があります。このような：
divElement.setAttribute("title", "Line one\x0ALine two");
Firefox 12以降、改行HTMLエンティティを使用した改行がサポートされるようになりました：
<span title="First line Second line">Test</span>
これはIEで機能し、 title属性 のHTML 5仕様によれば正しいです。
JQueryを使用している場合
$(td).attr("title", "One \n Two \n Three");
働くでしょう。
iE-9でテストされています。

ソリューションへの貢献として、あなたがこのような何かをする必要があるならば、私たちはタブのために	を使うこともできます。
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>デモ
私はパーティーに遅刻していることを知っています、しかし、これがうまくいっているのを見たいだけのもののために、ここにデモがあります：http://jsfiddle.net/rzea/vsp6840b/ 3 /
使用されているHTML：
<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>
はすべての主要なブラウザ（IEを含む）で動作します
これらすべてをテストする必要があるという要件がありました。共有したいのはここにあります
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/> がうまく動かなかった人は、行が表示される要素を次のようにスタイルする必要があります。white-space: pre-line;
この回答から参照してください： https://stackoverflow.com/a/17172412/1460591
Chrome 16、およびそれ以前のバージョンでは、 "\ n"を使用できます。補足として、 "\ t"も機能します。
信じられません。 Firefox 2はとにかく長いリンクのタイトルをトリミングしていて、それらはほんの少しのヘルプテキストを伝えるために実際に使われるべきです。もっと説明が必要な場合は、リンクに関連した段落に属することをお勧めします。その後、これらの段落を非表示にしてホバー時にツールチップとして表示するためのツールチップJavaScriptコードを追加できます。それはクロスブラウザIMOを動作させるためにあなたの最善の策です。

 <-----これはCarry Returnを挿入するのに必要なテキストです。
JavaScriptを使うだけです。その後、ほとんどの古いブラウザと互換性があります。改行にはエスケープシーケンス\ nを使用してください。
document.getElementById("ElementID").title = 'First Line text \n Second line text'
ただこれを使ってください。
<a title='Tool
Tip
On
New
Line'>link with tip</a>
この
を使ってタイトルに新しい行を追加することができます。
これによると w3cのウェブサイト上の記事 ：
CDATAは文書文字セットからの文字のシーケンスであり、文字実体を含むことができます。ユーザーエージェントは次のように属性値を解釈するべきです：
- 文字実体を文字に置き換える
- 改行を無視する
- 各キャリッジリターンまたはタブを1つのスペースに置き換えます。
つまり、（少なくとも）CRとLFはtitle属性の中では機能しません。ツールチッププラグインを使用することをお勧めします。これらのプラグインのほとんどは、任意のHTMLを要素のツールチップとして表示することを可能にします。
アクセシビリティに関する情報と、CRや改行を使用してツールチップを大きくすることで得られる情報から、さまざまなブラウザが基本的に同意できない、または同意できないという事実は、アクセシビリティについてあまり関心がないことを示しています。
単純なtitle属性を使用するだけで、この
は機能するはずです。
ブートストラップポップオーバーでは、data-html="true"を使用し、data-content属性にhtmlを使用してください。
<div title="Hello 
World">hover here</div>より見栄えの良いツールチップを手動で作成したり、HTML形式を含めることができます。
<!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>
これは w3schools post から取られています。 ここで上記のコードを試してください 。
かみそりの構文
ASP.NET MVCの場合は、\r\nを使用するのと同じようにタイトルを変数として格納するだけで、うまくいきます。
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
ハックは動作します - （クロムとモバイルでテスト済み）
分割するまで分割スペースを追加しないでください - コンテンツの量に応じてツールチップサイズを制限する必要があるかもしれませんが、小さなテキストメッセージの場合はこれが機能します。
etc
上記のすべてを試してみた、これが私のために働いた唯一のものです -