我目前正在向我们的网站添加详细的工具提示,并且我希望(不必诉诸于whizz-bang jQuery插件,我知道有很多!)使用回车符来格式化工具提示。
要添加提示,我正在使用title
属性。我浏览了通常的网站并使用了以下基本模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我尝试用替换?
:
<br />
&013; /
\r\n
Environment.NewLine
(我正在使用C#)
以上都不是。可能吗?
我目前正在向我们的网站添加详细的工具提示,并且我希望(不必诉诸于whizz-bang jQuery插件,我知道有很多!)使用回车符来格式化工具提示。
要添加提示,我正在使用title
属性。我浏览了通常的网站并使用了以下基本模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我尝试用替换?
:
<br />
&013; /
\r\n
Environment.NewLine
(我正在使用C#)以上都不是。可能吗?
我尝试使用“”在新行中显示标题文本,它的工作方式就像一个超级按钮
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工作的最佳选择。
我知道我参加晚会很晚,但是对于那些只想看一下工作原理的人,这里有一个演示: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>
。