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

Question

我目前正在向我们的网站添加详细的工具提示，并且我希望（不必求助于 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 替换为 ASCII 十六进制 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 中有效，并且根据 HTML5 规范的title 属性是正确的。

score 18 · Accepted Answer

如果您使用的是 jQuery：

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

将工作。

在 IE-9 中测试：工作。

score 17 · Accepted Answer

在 Chrome 79 上，不再工作。

我成功了：




这适用于所有主要浏览器。

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 8 · Accepted Answer

我知道我迟到了，但对于那些只想看到这个工作的人，这里有一个演示：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>

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>

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

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

从有关可访问性的可用信息和使用 CR 或换行符使它们变大的工具提示的使用受到赞赏，各种浏览器不能/不会就基本知识达成一致的事实表明它们不太关心可访问性。

score 3 · Accepted Answer

根据w3c 网站上的这篇文章：

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

用字符替换字符实体，

忽略换行，

用一个空格替换每个回车符或制表符。

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

score 3 · Accepted Answer

可以手动创建更好看的工具提示，并且可以包含 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关于此的帖子。在这里试验上面的代码。

score 2 · Accepted Answer

剃刀语法

在 ASP.NET MVC 的情况下，您可以将标题存储为变量作为使用\r\n，它会工作。

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

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

score 2 · Accepted Answer

有多种方法可以做到这一点，&#13或者
取决于浏览器。但以下示例适用于我的 chrome 和 firefox。

    <a href="javascript:;" title="Tooltip Line One &#10;Tooltip Line Two &#10;Tooltip Line Three">Tooltip</a>

score 0 · Accepted Answer

破解但有效 - （在 chrome 和移动设备上测试）

只需在中断之前不添加中断空格 - 您可能必须根据内容量限制工具提示的大小，但对于小文本消息，这有效：

&nbsp;&nbsp; etc

尝试了以上所有方法，这是唯一对我有用的方法-

score 0 · Accepted Answer

0

我试过用“”在新行中显示标题文本，它的工作就像一个魅力

于 2019-11-06T06:09:32.110 回答

score 0 · Accepted Answer

我在 Firefox 68.7.0esr 上并且不起作用。通过确实可以打破界限，<CR>所以我会这样做，因为它简单而前进。IE

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

如果您尝试在以以下格式呈现的 React 项目中执行此操作：

title={`First line of text ${varOne} &#13; Second line of text ${varTwo} &#13; Third line of text ${varThree}`}

然后，
类似的解决方案不起作用。它们实际上将呈现为文本。

相反，根据需要实际创建文本是更好的选择。一个更好理解的例子：

title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}

确保在和之前删除制表符/空格缩进Second line of text，Third line of text否则它们也会呈现。

在 Google Chrome 96 和 Firefox 95.0b12（开发版，因为，为什么不）上测试过。它也应该适用于大多数现代浏览器。

score 0 · Accepted Answer

在搜索在引导工具提示中显示断线的解决方案时，我被定向到此页面。Bootstrap工具提示在data-toggle="tooltip"添加到 HTML 标记时会显示。最后，我发现data-html="true"应该将 a 添加到标签中，这样你的 HTMLtitle就会被渲染。然后用于<br>断线。结帐样品如下：

之前（不显示任何断线）：

<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="test1 <br> test2"></i>

之后（显示断线）：

<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="test1 <br> test2"></i>

- Laravel 和 Blade 程序员的提示：您可以转换\n为<br>withnl2br("string")函数。

- 上述解决方案已在 chrome 98 中进行了测试。

score -2 · Accepted Answer

-2

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

于 2018-09-05T12:03:21.513 回答

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

31 回答 31

更新：

演示

Related

Reference