在工具提示中添加换行符

Question

如何在HTML工具提示中添加换行符？

我尝试使用<br/>和\n在工具提示中如下:

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

然而,这是无用的,我可以看到文字文本<br/>和\n工具提示中.任何建议都会有所帮助.

Answer 1

只需
在title属性中使用实体代码进行换行即可.

Answer 2

在
与风格相结合的白色空间:前行; 为我工作.

Answer 3

只需添加数据属性即可

数据HTML ="真"

而你很高兴.

例如.用法:

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>

它已经在我目前尝试的大多数工具提示插件中工作.

Answer 4

这个CSS最终在我的编辑器中与换行符一起为我工作:

.tooltip-inner {
    white-space: pre-wrap;
}

在这里找到: 如何使Twitter引导工具提示有多行？

Answer 5

\n在文本之间给出.它适用于所有浏览器.

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

这对我有用,并且它在后面的代码中使用.

希望这对你有用

Answer 6

\n

与造型

.tooltip-inner {
    white-space: pre-line;
}

为我工作.

Answer 7

我找到了。它可以通过简单地这样做来完成

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

Answer 8

<br />如果你使用 qTip 的话确实有用

Answer 9

javascript 版本

由于
(html) 是0D(hex)，这可以表示为'\u000d'

str = str.replace(/\n/g, '\u000d');

此外，

由于其他答案中的引用，与你们分享一个AngularJS 过滤器，该过滤器替换\n为该字符

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

用法

<div title="{{ message | titleLineBreaker }}"> </div>

Answer 10

只需在标题中使用 \n 并添加此 css

.tooltip-inner {
    white-space: pre-wrap;
}

Answer 11

您可以使用引导工具提示，并且不要忘记将 html 选项设置为 true。

<div id="tool"> tooltip</div>

$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>