Question

我目前正在向我们的网站添加详细的工具提示，我想（无需借助一个奇怪的jQuery插件，我知道有很多！）使用回车来格式化工具提示。

要添加提示，我正在使用title属性。我查看了常用网站并使用了基本模板：

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

我已尝试将?替换为：

<br />
&013; / 
\r\n
Environment.NewLine（我正在使用C＃）

以上都不奏效。有可能吗？

Answer 1

latest specification允许换行字符，因此属性或实体
内的简单换行符（请注意字符#和;是必需的）可以。

Answer 2

这很简单，你会踢自己......只需按回车即可！

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

Firefox根本不会显示多行工具提示 - 它将无需替换换行符。

Answer 3

尝试使用角色10.但它在Firefox中不起作用。：（

在a中显示文本（如果有的话）浏览器依赖方式。小工具提示适用于大多数浏览器。长 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>

Answer 4

在IE，Chrome，Safari，Firefox（最新版本2012-11-27）中进行了测试：


适用于所有人......

Answer 5

另外值得一提的是，如果你用这样的Javascript设置title属性：

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

它无效。您必须将ASCII十进制10替换为ASCII十六进制A，其方式是使用Javascript进行转义。像这样：

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

Answer 6

从Firefox 12开始，他们现在使用换行符HTML实体支持换行符：


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

这适用于IE，根据title attribute的HTML5规范是正确的。

Answer 7

如果您使用的是jQuery：

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

会奏效。

在IE-9中测试：工作。

Answer 8

作为对解决方案的贡献，如果您需要执行此类操作，我们还可以使用&#009作为标签。

＆＃13;

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

＆＃13;

演示

Answer 9

在Chrome 79上，Image.open()不再起作用。

我成功完成了：



这在所有主流浏览器中都有效。

Answer 10

适用于所有主要浏览器（包括IE）

Answer 11

我知道我参加派对已经迟到了，但对于那些只想看到这个有效的人来说，这是一个演示： 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>

Answer 12

我们需要测试所有这些，这是我想要分享的内容

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

Fiddle

Answer 13

至于谁subprocess.Popen(['hostname', '-f', '-anotherparam', 'onemoreparam'], stdout=subprocess.PIPE).communicate()[0]无法正常工作，您必须设置可见线条的元素的样式：


参考本答案：https://stackoverflow.com/a/17172412/1460591

Answer 14

＆lt; -----这是插入Carry Return所需的文字。

Answer 15

在Chrome 16以及可能的早期版本中，您可以使用“\ n”。作为旁注，“\ t”也有效

Answer 16

我不相信。 Firefox 2无论如何都会修剪长链接标题，它们实际上只能用于传达少量的帮助文本。如果您需要更多解释文本，我建议它属于与链接相关联的段落。然后，您可以添加工具提示javascript代码以隐藏这些段落并在悬停时将其显示为工具提示。这是让它在跨浏览器IMO中工作的最佳选择。

Answer 17

只需使用：

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

您可以使用此&#x0a在标题上添加新行。

Answer 18

只需使用JavaScript。然后兼容大多数和旧版浏览器。使用转义序列\ n换行。

template

Answer 19

根据article on the w3c website：

CDATA是文档字符集和字符序列   可以包括字符实体。用户代理应该解释属性   值如下：


用字符替换字符实体

忽略换行，

用一个空格替换每个回车或标签。

这意味着（至少）CR和LF在title属性中不起作用。我建议你使用工具提示插件。这些插件中的大多数都允许将任意HTML显示为元素的工具提示。

Answer 20

从可访问性和使用工具提示的信息中可以看出，使用CR或换行符会使它们更大，各种浏览器不能/不会就基础知识达成一致的事实表明他们并不太关心可访问性。

Answer 21

如果您只使用简单的标题属性，则此应该有效。

在bootstrap popovers上，只需使用data-html="true"并在data-content属性中使用html。

＆＃13;

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

＆＃13;

Answer 22

好看的工具提示可以手动创建，并且可以包含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>

此内容取自the w3schools post。 Experiment with the above code here。

Answer 23

Razor语法

对于ASP.NET MVC，您只需将标题存储为使用\r\n的变量即可。

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

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

Answer 24

“直接按回车”解决方案在这里不起作用，所以好的旧 vanilla 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（不排除其他人，我只是没有检查）。

Answer 25

我正在使用firefox 68.7.0esr，并且无法正常工作。通过<CR>打破界限确实可行，因此我将继续进行下去，因为它既简单又向前。即

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

Answer 26

我尝试了“ ”以在新行中显示标题文本，其工作方式就像一个超级魅力

Answer 27

黑客但有效 - （在Chrome和移动设备上测试）

在它中断之前不添加任何中断空格 - 您可能必须根据内容量限制工具提示大小，但对于小文本消息，这可以工作：

&nbsp;&nbsp; etc

尝试了以上所有内容，这是唯一对我有用的东西 -

Answer 28

使用data-html="true"并应用<br>。

如何在HTML工具提示中使用回车符？

28 个答案:

更新

演示