我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的jQuery插件,我知道有很多!)使用回车来格式化工具提示。
为了添加提示,我使用了title属性。我环顾了一下常用的网站,并使用了基本的模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我试过更换?:
< br / > &013;/ & # 13; \ r \ n 环境。换行符(我使用c#)
以上方法都行不通。这可能吗?
我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的jQuery插件,我知道有很多!)使用回车来格式化工具提示。
为了添加提示,我使用了title属性。我环顾了一下常用的网站,并使用了基本的模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我试过更换?:
< br / > &013;/ & # 13; \ r \ n 环境。换行符(我使用c#)
以上方法都行不通。这可能吗?
当前回答
& # 013;如果只使用简单的title属性,应该可以工作。
在Bootstrap弹窗中,只需使用data-html="true"并在data-content属性中使用HTML。
<div title=“Hello World”>悬停在这里</div>
其他回答
我们有一个需求,我们需要测试所有这些,下面是我想分享的:
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/>
小提琴
从Firefox 12开始,他们现在支持使用换行HTML实体的换行:
<span title="First line Second line">Test</span>
这在IE中工作,并且根据HTML5的title属性规范是正确的。
作为对
解决方案,我们也可以使用	标签,如果你需要做这样的事情。
<按钮标题= "我的待办事项清单:& # 013;& # 009;项目2 & # 013;& # 009;项目3 & # 013;& # 009;项目4 & # 013;& # 009;& # 009;子项1”> > < /按钮测试
Demo
如果你试图在一个React项目中这样做,你将以下面的格式呈现:
title={`First line of text ${varOne} Second line of text ${varTwo} Third line of text ${varThree}`}
那么 , 类似的解决方案并不奏效。它们实际上会呈现为文本。
相反,根据需要实际创建文本是更好的选择。为了更好地理解,举个例子:
title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}
确保在“第二行文本”和“第三行文本”之前删除制表符/空格缩进。否则他们也会渲染。
它在谷歌Chrome 96和Firefox 95.0b12(开发者版,因为,为什么不呢)上进行了测试。它应该也适用于大多数现代浏览器。
就用这个吧:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
您可以使用
在标题上添加新行。