How can I use a carriage return in a HTML tooltip?

2018-12-31 15:08发布

站内问答 / 前沿技术
1317 24 6

I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.

To add the tip I'm using the title attribute. I've looked around the usual sites and using the basic template of:

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

I've tried replacing the ? with:

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (I'm using C#)

None of the above works. Is it possible?

24条回答
大哥的爱人
2楼-- · 2018-12-31 15:39

Much nicer looking tooltips can be created manually, and can include HTML formatting.

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

This is taken from the w3schools post on this. Experiment with the above code here.

查看更多
0人赞 添加讨论(0) 举报
高级女魔头
3楼-- · 2018-12-31 15:40

use data-html="true" and apply <br>.

查看更多
0人赞 添加讨论(0) 举报
不再属于我。
4楼-- · 2018-12-31 15:42

As of Firefox 12 they now support line breaks using the line feed HTML entity: &#10;

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

This works in IE and is the correct according to the HTML5 spec for the title attribute.

查看更多
0人赞 添加讨论(0) 举报
无色无味的生活
5楼-- · 2018-12-31 15:43

Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
&#13;

Works in all of them...

查看更多
0人赞 添加讨论(0) 举报
萌妹纸的霸气范
6楼-- · 2018-12-31 15:45

From the information available on accessibility and the use of tooltips making them larger with the use of CR or line break is appreciated, the fact that the various browsers cannot/will not agree on basics shows that they don't much care about accessibility.

查看更多
0人赞 添加讨论(0) 举报
初与友歌
7楼-- · 2018-12-31 15:45

Razor Syntax

In the case of ASP.NET MVC you can just store the title as a variable as use \r\n and it'll work.

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

<h3 title="@logTooltip">Logs</h3>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)