我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的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#)
以上方法都行不通。这可能吗?
当前回答
可以手动创建更漂亮的工具提示,并可以包含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的帖子。在这里试验一下上面的代码。
其他回答
这里是一个演示: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>
我试过 在新的一行显示标题文本,它的工作就像一个魅力。
在Chrome 16或更早的版本中,你可以使用“\n”。顺便说一句,“\t”也可以。
我不这么认为。火狐2删减了长链接标题,它们应该只用于传达少量的帮助文本。如果你需要更多的解释文本,我会建议它属于一个与链接相关的段落。然后,您可以添加工具提示JavaScript代码来隐藏这些段落,并在悬停时将它们作为工具提示显示。在我看来,这是让它跨浏览器工作的最佳选择。
作为对
解决方案,我们也可以使用	标签,如果你需要做这样的事情。
<按钮标题= "我的待办事项清单:& # 013;& # 009;项目2 & # 013;& # 009;项目3 & # 013;& # 009;项目4 & # 013;& # 009;& # 009;子项1”> > < /按钮测试
Demo