我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的jQuery插件,我知道有很多!)使用回车来格式化工具提示。

为了添加提示,我使用了title属性。我环顾了一下常用的网站,并使用了基本的模板:

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

我试过更换?:

< br / > &013;/ & # 13; \ r \ n 环境。换行符(我使用c#)

以上方法都行不通。这可能吗?


当前回答

作为对&#013;解决方案,我们也可以使用&#009标签,如果你需要做这样的事情。

<按钮标题= "我的待办事项清单:& # 013;& # 009;项目2 & # 013;& # 009;项目3 & # 013;& # 009;项目4 & # 013;& # 009;& # 009;子项1”> > < /按钮测试

Demo

其他回答

试试第10个字符。直到2015年1月,它还不能在Firefox中运行。

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

http://modp.com/wiki/htmltitletooltips

Firefox现在支持使用&#13;在HTML标题属性中插入换行符。请参阅下面的代码片段示例。

<a href="#" title="第1行&#13;第2行&#13;第3行">悬停多行标题</a>

我使用的是火狐68.7.0 ESR和&#013;是行不通的。通过<CR>断行确实有用,所以我使用它,因为它简单而向前。

也就是说,

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

在寻找在引导工具提示中显示断线的解决方案时,我被引导到此页面。当data-toggle="tooltip"被添加到HTML标签中时,引导工具提示将显示出来。

最后,我发现一个data-html="true"应该被添加到标签中,这样做你的标题内的HTML将被呈现。然后使用<br>来breakline。检查下面的示例:

之前(未显示任何折线):

<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="test1 <br> test2"></i>

After(显示折线):

<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="test1 <br> test2"></i>

- Laravel和Blade程序员的提示:你可以用nl2br("string")函数将\n转换为<br>。

-以上解决方案已在谷歌Chrome 98中测试。

在Chrome 79, &#13;已经不管用了。

我成功地做到了:

& # 13; & # 10;

这适用于所有主流浏览器。

“只需按下enter”的解决方案在这里不起作用,所以优秀的老香草JavaScript似乎是一种相当高效和干净的方法。

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

在元素onmouseover上:

onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"

瞧!它适用于谷歌Chrome和Firefox(不排除其他;我只是没有检查)。