我目前正在向我们的网站添加详细的工具提示，并且我希望（不必诉诸于whizz-bang jQuery插件，我知道有很多！）使用回车符来格式化工具提示。
要添加提示，我正在使用title属性。我浏览了通常的网站并使用了以下基本模板：
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我尝试用替换?：
<br />&013; / \r\nEnvironment.NewLine（我正在使用C＃）
以上都不是。可能吗？
如何在HTML工具提示中使用回车符？
第3161篇《如何在HTML工具提示中使用回车符？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共22个回答
我尝试使用“”在新行中显示标题文本，它的工作方式就像一个超级按钮
hack但可以使用-（在chrome和移动设备上经过测试）
只是不添加任何空格，直到它断开为止-您可能必须根据内容的数量来限制工具提示的大小，但是对于小文本消息来说，这是可行的：
etc
尝试了上面的所有内容，这是唯一对我有用的东西-
剃刀语法
对于ASP.NET MVC，您可以将标题作为使用变量存储，这样就可以使用\r\n。
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
可以手动创建好看的工具提示，并且可以包含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 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帖子上获得的。在这里尝试上面的代码。
从有关可访问性的信息以及使用提示或通过使用CR或换行符使其变得更大的工具提示的使用中得到赞赏，各种浏览器无法/不会在基础知识上达成共识这一事实表明，他们不太在意可访问性。
在Chrome 79 上无法正常运行。
我成功完成了：
这适用于所有主要浏览器。

如果您仅使用简单的title属性，则此方法应该起作用。
在自举弹出窗口上，只需data-html="true" 在data-content属性中使用html即可。
<div title="Hello 
World">hover here</div>在Chrome 16以及可能的早期版本上，您可以使用“ \ n”。附带说明，“ \ t”也有效
至于谁 不工作，则必须将可见行的元素设置为：white-space: pre-line;
从这个答案引用：https : //stackoverflow.com/a/17172412/1460591
我不相信。Firefox 2会修剪长链接标题，实际上它们仅应用于传达少量帮助文本。如果您需要更多说明文字，建议您将其包含在与链接关联的段落中。然后，您可以添加工具提示javascript代码以隐藏这些段落，并将其显示为悬停工具提示。这是让它跨浏览器IMO工作的最佳选择。
作为对
解决方案的贡献，	如果您需要执行以下操作，我们还可以将其用于制表符。
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>演示版
我知道我参加晚会很晚，但是对于那些只想看一下工作原理的人，这里有一个演示：http : //jsfiddle.net/rzea/vsp6840b/3/
使用的HTML：
<a href="#" title="First Line
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>

 <-----这是插入“进位退货”所需的文本。
如果您使用的是jQuery：
$(td).attr("title", "One \n Two \n Three");
将工作。
在IE-9中测试过：可以正常工作。
适用于所有专业浏览器（包括IE）
在最新的规范允许换行符，所以属性或实体内部的一个简单的换行符 （注意，字符#和;为必填项）都OK。
同样值得一提的是，如果要使用Javascript设置title属性，例如：
divElement.setAttribute("title", "Line one Line two");
它不会工作。您必须使用Java逸出方式将ASCII十进制10替换为ASCII十六进制A。像这样：
divElement.setAttribute("title", "Line one\x0ALine two");
在IE，Chrome，Safari，Firefox（最新版本2012-11-27）中对此进行了测试：
适用于所有人
尝试使用字符10。但是，它在Firefox中将无法使用。:(
文本以浏览器相关的方式显示（如果有的话）。小工具提示可在大多数浏览器上使用。较长的工具提示和换行符可在IE和Safari中使用（
或 用于新换行符）。Firefox和Opera不支持换行符。Firefox不支持较长的工具提示。
http://modp.com/wiki/htmltitletooltips
更新：
自2015年1月起，Firefox确实支持使用 来在HTML title属性中插入换行符。请参见下面的代码段示例。
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>从Firefox 12开始，它们现在使用换行HTML实体支持换行符：
<span title="First line Second line">Test</span>
这在IE中有效，并且根据HTML5规范的title属性是正确的。
相似问题
问题类别
使用
data-html="true"和应用<br>。