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


330

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

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

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

私はに置き換えてみました?

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

上記のどれも動作しません。出来ますか?


かなりトリッキーですが、回避策があるかもしれません。タイトルのすべてのスペースを改行しないスペースに変更します&nbsp;。次に、改行する場所にスペースを置きます。&nbsp;スペースの前に一連の文字を追加する必要がある場合もあります(改行)。
jumxozizi

回答:


292

それはあなたが自分を蹴るのでとても簡単です...ただEnterキーを押してください!

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

ただし、Firefoxは複数行のツールチップをまったく表示しません-改行を何も置き換えません。


69
この回答は古く、Firefox タイトルに改行を表示ます(私はv25を使用しています)。\n\u000Aおよびで動作し\x0Aます。
Halcyon 2014

1
@Halcyon、他の読者のために明確にするために、上記の3つのコードはHTMLではないようです。それらは、C派生言語の文字列エスケープシーケンスに似ています。
Sam

3
@サムそれがどういう意味かわかりません。\x0A(バイト)は、改行に対応する文字コードです。同じのための\u000A(ユニコード)。\n改行でもあります。
Halcyon

13
@ Halcyon、titleFirefoxとChromeの属性にこれらのエスケープシーケンスを挿入してみましたが、それらは文字通りツールチップに表示されていました。その後、使用すべき文字(エスケープシーケンスではない)を伝える方法として、おそらくその構文を使用していることに気付きました。私のコメントは、エスケープシーケンスをHTMLに含めないように警告することで他の人の時間を節約することです。
Sam

4
@Tarquin HTMLでは機能せず、PHPの二重引用符の機能であるため、特にPHPの二重引用符で機能します。
ブリリアント

307

最新の仕様は、改行文字を許可するので、属性またはエンティティ内の簡単な改行&#10;(文字ことに注意してください#とが;必要とされている)はOKです。


4
Chromeではサポートされていませんが、Firefoxではサポートされています。
Alaeddine、2015年

5
私は両方を試してみました&#10;&#13;&#13;chromeバージョン50.0.2661.94(64ビット)で意図された「改行」を受け入れません。&#10;現在のバージョンのchrome、firefox、opera(すべて64ビットUbuntu用)、およびInternet Explorerバージョン11.0とWindowsでのいくつかの変更でうまく機能しています。
Tass

これは、Wordpressポストエディターで実行しようとしたため、特に便利です。
ed1nh0

13
&#10; IE、Firefox、Chromeで美しく動作します。ありがとう!
ダニエル

クロムの場合&#013; .......例:title = "title1&#13; title2&#13; title3"
Malik Zahid

75

キャラクター10を試してください。Firefoxでは機能しません。:(

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

http://modp.com/wiki/htmltitletooltips

更新:

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

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


2
+1。jQueryプラグインを使用する場合、最適なアクセシビリティを実現するために、コンテンツをtitle属性から読み取り、実行時に改行を任意の非表示の文字に置き換えます。
ケントフレドリック

+1。面白いもの。タイトルがポップアップするときに一部のUAがタイトルをトリミングする問題が残っています。私が覚えているようにFF2ですが、最近はそれほど問題になりません。
roborourke 2008

3
2015年1月の時点で、Firefoxは属性での改行の挿入をサポートし&#13;ていtitleます。
2015

IE11のSVG要素で改行が機能しませんでした<title>。誰かがそれでもっと成功しましたか?上記/下記の文字コードを試してみましたが、機能しないようです。
RemEmber 2015年

64

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

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


最初の方法(コードの改行)はより簡単に見えますが、自動フォーマッターjs-codeプログラムには対応していません。
ホリアトゥ

@Camilo Martin、改行、改行はプラットフォーム間で同じです。&#10;Windowsの改行と同じようにUNIXの改行です。同様に、&#13;両方のプラットフォームの改行です。スペック指定はもちろんである改行(LF)文字&#10;の両方(全て?)のプラットフォーム上で。
2015

2
@matty私が理解しているかどうかはわかりません-使用する正しいものはunix LF(プロトコルとツール全体の標準的な改行です)のようで、CR古いMac(および他のあいまいなプラットフォーム)でのみ使用されていて、場違いのようです。
Camilo Martin

言葉の混乱を招きましたことをお詫び申し上げます。私が改行(#10)と呼んだものは、改行ですが、LFと呼ばれることもあります。私が改行(#13)と呼んだのは、実際には改行です。いずれにせよ、これらの値はすべてのプラットフォームで同じであるというのが私の指摘でした。ウィンドウ(これらの文字の両方を使用して行を終了する)とmac(「間違った」文字を使用して行を終了する)は、title属性で使用するHTMLエンティティとは無関係である必要があるという事実。仕様によると&#10;、明らか&#13;に多くの状況でも同様に機能します。
2015

2
プレーン&#13; LinuxのChromeでは機能しません。シーケンス&#13;&#10; ただし、します。
Sam Watkins

51

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

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

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

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


@MaxNanasy同意し、それらは同等です(\nとにかく文字コード10を意味します)
rvighne

29

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

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

これはIEで機能し、title属性の HTML5仕様によれば正しいものです


16

jQueryを使用している場合:

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

動作します。

IE-9でテスト済み:機能しています。


MVC 3での使用例:@ Html.DropDownList( "RegId"、null、 "Select Region"、new {title = "Select a region from a drop-down menu、\ nthis required to get a list of valid contract names" 、@ class = "form-control"、onchange = "getContractNames(this)"、style = "width:200px;"})
Warren LaFrance

15

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

デモ

ここに画像の説明を入力してください


8

&#13; すべての主要ブラウザで動作します(IEを含む)


13
この回答は古くなっています。&#13; Chromeや他のブラウザでも動作します。
SaeX

7

私はパーティーに遅れていることを知っていますが、これが機能するのを見たいだけの人のために、ここにデモがあります: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>

2
最新の応答であり、Firefoxでうまく動作します。ありがとう。
Marwanمروان、2015年

6

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



6

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


6

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

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

フィドル




4

これを使うだけです:

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

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


4

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

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

Chromeのバージョンは何ですか?それは私のために動作し、私はChromeを使用しています。
ウェルシュボーイ、2016年

実際には最新バージョンのChromeを使用していますが、SVG要素を使用していたため、機能しませんでした。
NewPHPer 2016年

4

これ&#013;は、単純なタイトル属性を使用するだけで機能します。

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

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


3

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


2
クロスブラウザーのカスタマイズされたツールチップの非常に簡単なソリューションについては、kollermedia.at / archive / 2008/03/24 / easy
Dave

@Daveこれは素晴らしいリンクですが、デモの改行は幅属性が原因で発生します
Melsi

3

w3cウェブサイトのこの記事によると:

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

  • 文字エンティティを文字に置き換え、
  • 改行を無視し、
  • 各キャリッジリターンまたはタブを1つのスペースに置き換えます。

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


1
ええ、私はそれが公式ではないことを知っています。あなたは間違っています、ハワー。表示されないという意味ではありません。これは、W3C仕様にそれらの表示方法が記載されていないことを意味します...。投稿の目的は、それらがより機能的なプラグインを置き換えるために使用できることを示唆することではありませんでした。
penderi 2011

@ip:更新されたw3cの推奨事項、ブラウザーがコンテンツをLF文字の周りで分割すること示唆しているという点で私は間違っいます。ただし、ブラウザはこの動作を最終的に実装します。
サルマンA

2

より見栄えの良いツールチップは手動で作成でき、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の投稿から抜粋したものです。ここで上記のコードを試してください


1

かみそりの構文

ASP.NET MVCの場合、使用するだけでタイトルを変数として保存でき\r\n、機能します。

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

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

0

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

改行するまで改行スペースを追加しないでください。コンテンツの量によってはツールチップのサイズを制限する必要があるかもしれませんが、小さなテキストメッセージの場合はこれでうまくいきます。

&nbsp;&nbsp; etc

上記のすべてを試しましたが、これが私にとってうまくいった唯一のことです-


0

「」を使用してタイトルテキストを新しい行に表示しようとしましたが、これは魅力のように機能します


0

私はFirefox 68.7.0esrを使用して&#013;いますが、動作しません。経由で行を分割する<CR>ことはうまくいきましたので、それは単純で前向きなので、私はそれで進みます。すなわち

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

-1

使用data-html="true"および適用<br>


1
これは仕様の一部ではありません。ランダムなツールチッププラグインである必要があります
TJ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.