html - HTMLツールチップでキャリッジリターンを使用するにはどうすればよいですか？

Question

現在、詳細なツールチップをサイトに追加しています。キャリッジリターンを使用してツールチップをフォーマットしたいと思います（whizz-bang jQueryプラグインに頼る必要はありません！）。

ヒントを追加するには、title属性を使用しています。私は通常のサイトを見て回り、次の基本的なテンプレートを使用しました。

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

を次のように置き換えてみました?：

<br />
&013; / 
\r\n
Environment.NewLine（私はC＃を使用しています）

上記のいずれも機能しません。出来ますか？

score 337 · Accepted Answer

最新の仕様では改行文字が許可されているため、属性またはエンティティ内の単純な改行（文字と必須
であることに注意してください）は問題ありません。#;

score 319 · Accepted Answer

それはあなたが自分自身を蹴るのはとても簡単です：押すだけEnterです！

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

score 88 · Accepted Answer

文字10を試してください。ただし、Firefoxでは機能しません。:(

テキストは（あるとしても）ブラウザに依存した方法で表示されます。小さなツールチップはほとんどのブラウザで機能します。IEとSafariでは長いツールチップと改行が機能します（
または新しい改行に使用します）。FirefoxとOperaは改行をサポートしていません。Firefoxは長いツールチップをサポートしていません。

http://modp.com/wiki/htmltitletooltips

アップデート：

2015年1月の時点で、FirefoxはHTML属性に改行を挿入するための使用をサポートしています。title以下のスニペットの例を参照してください。

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

score 68 · Accepted Answer

IE、Chrome、Safari、Firefox (最新バージョン 2012-11-27) でこれをテストしました:


それらのすべてで動作します...

score 60 · Accepted Answer

また、次のように Javascript で title 属性を設定している場合は、言及する価値があります。

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

うまくいきません。Javascript でエスケープする方法で、ASCII 10 進数の 10 を ASCII 16 進数の A に置き換える必要があります。このような：

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

score 31 · Accepted Answer

Firefox 12以降、改行HTMLエンティティを使用した改行をサポートするようになりました。


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

これはIEで機能し、 title属性のHTML5仕様に従って正しいです。

score 18 · Accepted Answer

jQuery を使用している場合:

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

動作します。

IE-9 でテスト済み: 動作中。

score 16 · Accepted Answer

ソリューションへの貢献として、このようなことをする必要がある場合は、タブにも使用できます。&#009

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

デモ

score 11 · Accepted Answer

11

すべてのメジャーブラウザで動作します（IEを含む）

于 2008-12-11T10:17:14.277 に答える

score 7 · Accepted Answer

7

 <-----これはキャリーリターンを挿入するために必要なテキストです。

于 2010-03-26T12:17:47.947 に答える

score 7 · Accepted Answer

これらすべてをテストする必要があるという要件がありました。これが私が共有したいものです

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

フィドル

score 7 · Accepted Answer

これは、単純なタイトル属性を使用するだけで機能するはずです。

ブートストラップポップオーバーでは、属性data-html="true" で html を使用するだけです。data-content

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

score 6 · Accepted Answer

私はそうは思わない。Firefox 2はとにかく長いリンクのタイトルをトリミングしますが、実際には少量のヘルプテキストを伝えるためにのみ使用する必要があります。さらに説明テキストが必要な場合は、リンクに関連付けられた段落に属していることをお勧めします。次に、ツールチップjavascriptコードを追加して、これらの段落を非表示にし、ホバー時にツールチップとして表示することができます。これは、クロスブラウザーIMOを機能させるための最善の策です。

score 6 · Accepted Answer

Chrome 16、およびおそらくそれ以前のバージョンでは、「\n」を使用できます。補足として、「\t」も機能します

score 6 · Accepted Answer

誰
が機能しなかったかについては、次のように線が表示される要素のスタイルを設定する必要があります。white-space: pre-line;

この回答から参照: https://stackoverflow.com/a/17172412/1460591

score 5 · Accepted Answer

これを使用するだけです：

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

これを使用して、タイトルに新しい行を追加できます&#x0a。

score 5 · Accepted Answer

JavaScript を使用するだけです。その後、ほとんどの古いブラウザと互換性があります。改行にはエスケープシーケンス \n を使用します。

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

score 3 · Accepted Answer

w3c Webサイトのこの記事によると：

CDATAは、ドキュメントの文字セットからの文字のシーケンスであり、文字エンティティを含めることができます。ユーザーエージェントは、属性値を次のように解釈する必要があります。

文字エンティティを文字に置き換え、

改行を無視し、

各キャリッジリターンまたはタブを1つのスペースに置き換えます。

これは、（少なくとも）CRとLFがtitle属性内で機能しないことを意味します。ツールチッププラグインを使用することをお勧めします。これらのプラグインのほとんどでは、任意のHTMLを要素のツールチップとして表示できます。

score 3 · Accepted Answer

アクセシビリティに関する情報と、CR や改行を使用してサイズを大きくするツールチップの使用が評価されていることから、さまざまなブラウザーが基本に同意できない/同意しないという事実は、ブラウザーがアクセシビリティをあまり気にしていないことを示しています。

score 0 · Accepted Answer

ハックしますが動作します - (Chrome とモバイルでテスト済み)

壊れるまでブレークスペースを追加しないでください - コンテンツの量に応じてツールチップのサイズを制限する必要があるかもしれませんが、小さなテキストメッセージの場合、これは機能します:

&nbsp;&nbsp; etc

上記のすべてを試しましたが、これが私のために働いた唯一のものです-

score 0 · Accepted Answer

「Enter キーを押すだけ」のソリューションはここでは機能しなかったため、古き良きバニラ js はかなり効率的でクリーンな方法のようです。

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

そして要素 onmouseover

onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"

出来上がり！chrome と firefox で動作します (これは他のものを除外するものではありません。チェックしていませんでした)。

html - HTMLツールチップでキャリッジリターンを使用するにはどうすればよいですか？

31 に答える 31

アップデート：

デモ

Related

Reference