如何在HTML工具提示中使用回车符?

时间:2008-12-11 10:11:55

标签: html title tooltip

我目前正在向我们的网站添加详细的工具提示,我想(无需借助一个奇怪的jQuery插件,我知道有很多!)使用回车来格式化工具提示。

要添加提示,我正在使用title属性。我查看了常用网站并使用了基本模板:

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

我已尝试将?替换为:

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine(我正在使用C#)

以上都不奏效。有可能吗?

25 个答案:

答案 0 :(得分:271)

latest specification允许换行字符,因此属性或实体&#10;内的简单换行符(请注意字符#;是必需的)可以。

答案 1 :(得分:269)

这很简单,你会踢自己......只需按回车即可!

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

Firefox根本不会显示多行工具提示 - 它将无需替换换行符。

答案 2 :(得分:71)

尝试使用角色10.但它在Firefox中不起作用。 :(

  

在a中显示文本(如果有的话)   浏览器依赖方式。小   工具提示适用于大多数浏览器。长   IE中的工具提示和换行工作   和Safari(使用&#10;&#13;获取   新换行符)。 Firefox和Opera没有   支持换行。 Firefox没有   支持长工具提示。

http://modp.com/wiki/htmltitletooltips

更新

截至2015年1月,Firefox支持使用&#13;在HTML title属性中插入换行符。请参阅下面的代码段示例。

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

答案 3 :(得分:65)

在IE,Chrome,Safari,Firefox(最新版本2012-11-27)中进行了测试:
&#13;

适用于所有人......

答案 4 :(得分:46)

另外值得一提的是,如果你用这样的Javascript设置title属性:

divElement.setAttribute("title", "Line one&#10;Line two");

它无效。您必须将ASCII十进制10替换为ASCII十六进制A,其方式是使用Javascript进行转义。像这样:

divElement.setAttribute("title", "Line one\x0ALine two");

答案 5 :(得分:25)

从Firefox 12开始,他们现在使用换行符HTML实体支持换行符:&#10;

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

这适用于IE,根据title attribute的HTML5规范是正确的。

答案 6 :(得分:15)

如果您使用的是jQuery:

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

会奏效。

在IE-9中测试:工作。

答案 7 :(得分:14)

作为对&#013;解决方案的贡献,如果您需要执行此类操作,我们还可以使用&#009作为标签。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

演示

enter image description here

答案 8 :(得分:7)

我知道我参加派对已经迟到了,但对于那些只想看到这个有效的人来说,这是一个演示: 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>

答案 9 :(得分:7)

&#13;适用于所有主要浏览器(包括IE)

答案 10 :(得分:6)

我们需要测试所有这些,这是我想要分享的内容

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

Fiddle

答案 11 :(得分:5)

至于谁subprocess.Popen(['hostname', '-f', '-anotherparam', 'onemoreparam'], stdout=subprocess.PIPE).communicate()[0] 无法正常工作,您必须设置可见线条的元素的样式:&#10;

参考本答案:https://stackoverflow.com/a/17172412/1460591

答案 12 :(得分:5)

在Chrome 16以及可能的早期版本中,您可以使用“\ n”。作为旁注,“\ t”也有效

答案 13 :(得分:5)

我不相信。 Firefox 2无论如何都会修剪长链接标题,它们实际上只能用于传达少量的帮助文本。如果您需要更多解释文本,我建议它属于与链接相关联的段落。然后,您可以添加工具提示javascript代码以隐藏这些段落并在悬停时将其显示为工具提示。这是让它在跨浏览器IMO中工作的最佳选择。

答案 14 :(得分:5)

&#xD;&lt; -----这是插入Carry Return所需的文字。

答案 15 :(得分:4)

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

template

答案 16 :(得分:4)

只需使用:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

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

答案 17 :(得分:3)

根据article on the w3c website

  

CDATA是文档字符集和字符序列   可以包括字符实体。用户代理应该解释属性   值如下:

     
      
  • 用字符替换字符实体
  •   
  • 忽略换行,
  •   
  • 用一个空格替换每个回车或标签。
  •   

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

答案 18 :(得分:3)

从可访问性和使用工具提示的信息中可以看出,使用CR或换行符会使它们更大,各种浏览器不能/不会就基础知识达成一致的事实表明他们并不太关心可访问性。

答案 19 :(得分:2)

如果您只使用简单的标题属性,则此&#013;应该有效。

在bootstrap popovers上,只需使用data-html="true"并在data-content属性中使用html。

&#13;
&#13;
<div title="Hello &#013;World">hover here</div>
&#13;
&#13;
&#13;

答案 20 :(得分:2)

好看的工具提示可以手动创建,并且可以包含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>

此内容取自the w3schools postExperiment with the above code here

答案 21 :(得分:1)

Razor语法

对于ASP.NET MVC,您只需将标题存储为使用\r\n的变量即可。

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

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

答案 22 :(得分:0)

黑客但有效 - (在Chrome和移动设备上测试)

在它中断之前不添加任何中断空格 - 您可能必须根据内容量限制工具提示大小,但对于小文本消息,这可以工作:

&nbsp;&nbsp; etc

尝试了以上所有内容,这是唯一对我有用的东西 -

答案 23 :(得分:0)

我尝试了“ ”以在新行中显示标题文本,其工作方式就像一个超级魅力

答案 24 :(得分:-1)

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

豫ICP备18024241号-1