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

StackOverflow https://stackoverflow.com/questions/358874

  •  21-08-2019
  •  | 
  •  

質問

現在、サイトに冗長なツールチップを追加しているのですが、（すごい jQuery プラグインに頼る必要はありません。たくさんあるのはわかっていますが！）キャリッジ リターンを使用してツールチップの書式を設定したいと考えています。

チップを追加するために私が使用しているのは、 title 属性。私は通常のサイトを調べて、次の基本テンプレートを使用しました。

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

交換してみました ? と：

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (C#を使用しています)

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

役に立ちましたか？

解決

それはあなたが自分自身を蹴るますので、簡単です... Enterキーを押すだけです！

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

Firefoxは複数行にかかわらず、まったくツールチップ表示されません - それは何も改行に置き換えられます。

。

他のヒント

IE、クローム、サファリ、Firefoxでこれをテスト（最新バージョン2012年11月27日）：
&#13;

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

また言及する価値が、あなたはこのようにJavaScriptでtitle属性を設定する場合：

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

これは動作しません。あなたはそれはJavaScriptを使用してエスケープしていますように、ASCIIの16進数のAにそのASCII進10を交換する必要があります。このように：

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

Firefox 12 では、改行 HTML エンティティを使用した改行がサポートされるようになりました。 &#10;

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

これは IE で動作し、HTML5 仕様に従って正しいものです。 タイトル属性.

あなたはjQueryのを使用している場合：

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

に動作します。

IE-9でテスト：作業

あなたは今までこのような何かをする必要がある場合は、

&#013;ソリューションへの貢献として、我々はまた、タブのため&#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>

デモ

loading= の

"ここに画像の説明を入力します。

知っていいのだということを、ここでのデモ: http://jsfiddle.net/rzea/vsp6840b/3/

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>

&#13;は、すべてのメジャーなブラウザ（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&#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/>

フィドルする

私はそれがあるとは思いません。 Firefox 2がとにかく長いリンクタイトルをトリミングし、彼らは本当に唯一のヘルプテキストの少量を伝えるために使用する必要があります。あなたはより多くの説明テキストが必要な場合、私はそれがリンクに関連付けられた段落に属していることを示唆しています。あなたはそれらの段落を非表示にし、ホバー上のツールチップとしてそれらを表示するにはjavascriptのコードツールチップを追加することができます。つまり、クロスブラウザIMO動作するように取得するための最善の策です。

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

クロム16、そしておそらくそれ以前のバージョンでは、「\ n」を使用することができます。追記として、 "\ tは" も動作します。

&#10;

：誰のためwhite-space: pre-line;が機能しなかったとして

あなたは行がように見えるされている要素のスタイルを持っています

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

の

のただ、これを使用します 

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

あなたはこの&#x0aを使用して、タイトルに新しい行を追加することができます。

ただ、JavaScriptを使用しています。そして、ほとんどのと古いブラウザとの互換性。 改行をエスケープシーケンス\ nを使用します。

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

のアクセシビリティについて入手可能な情報から、そしてCRや改行を使用すると、それらを大きくするツールチップの使用が評価され、さまざまなブラウザは/基本的に同意しないだろうことができないという事実は、彼らがについて多くないように注意して行うことを示していますアクセス。

このよう 第に、w3cのwebサイト:

CDATAは文字シーケンスからのドキュメントの文字セット、 を含む文字ます。ユーザーエージェントが解釈するべき属性 値として

  • 置換文字体と文字
  • 無線フィード
  • 取り替えキャリッジリターンまたはタブルスペース。

すること(少なくとも)CR、LFな内部タイトル属性。をご提案いたしますが、ツールチップの引き出しおよび設定ができますこれらの多くのプラグインを任意のHTMLを表示する要素としてのツールチップ.

あなただけのシンプルなtitle属性を使用する場合は、

この&#013;は動作するはずです。

ブートストラップpopoversに、ちょうどdata-html="true"を使用してdata-content属性にHTMLを使用しています。 

<div title="Hello &#013;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&#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>

これは、W3Schoolsのは、この上に投稿から取られています。 ここを上記のコードを試してみます。

カミソリの構文

の場合ASP.NET MVCできるだけのタイトル変数としてとして使用 \r\n でんです。

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

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

ハックが、動作します - （クロームやモバイル上でテスト）

それが壊れるまで

ちょうど何の休憩スペースを追加しない - あなたがこの作品コンテンツの量が、小さなテキストメッセージのために依存するツールチップのサイズを制限する必要がある場合があります：

&nbsp;&nbsp; etc

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

data-html="true"を使用して<br>を適用します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top