【问题标题】：Add line break within tooltips在工具提示中添加换行符
【发布时间】：2011-03-21 10:14:58
【问题描述】：

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

我尝试在工具提示中使用  和\n，如下所示：

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

但是，这没用，我可以在工具提示中看到文字文本   和 \n。任何建议都会有所帮助。

【问题讨论】：

我也有同样的问题：stackoverflow.com/questions/3320081/…
使用
```
data-html="true"
```
参考并感谢：stackoverflow.com/a/19001875/2278891
在 asp.net (C# .NET 4.5 Framework) 中添加 Environment.NewLine 可以从代码端添加换行符...不用大惊小怪..不用麻烦...
下面的答案，由丹完美地工作。它在 CSS 中为该元素添加行空白，如下所示：.tooltip-inner { white-space: pre-wrap; }

标签： html tooltip newline

【解决方案1】：

可以在原生 HTML 工具提示中添加换行符，只需将 title 属性分布在多行上即可。

不过，我建议使用 jQuery 工具提示插件，例如 Q-Tip：http://craigsworks.com/projects/qtip/。

设置和使用都很简单。或者，周围也有很多免费的 javascript 工具提示插件。

编辑：对第一条语句的更正。

【讨论】：

【解决方案2】：

我找到了。只需这样做即可完成

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

【讨论】：

【解决方案3】：

只需在标题属性中使用实体代码&#013; 换行即可。

【讨论】：

if 实体代码不行，试试我正在使用 linux 和 chrome 不确定其他浏览器
我试过了，当我使用inspect元素注入它时它可以工作，但当我将它包含在我的html中并用这个字符部署它时它就不行了。我可能会失踪的任何明显原因？
我只使用了两个版本，&#013;&#010;，似乎工作得很好:)
在 Firefox v58 中不起作用。但是确实可以正常工作。使用@Phe0nix 根据需要使用两个换行符的解决方案可以很好地使其在 Chrome、Microsoft Edge 和 Firefox 中工作。
这两个代码在我的 asp.net webform 应用程序中都不起作用，这种方法解决了这个要求。 data-toggle="tooltip" data-html="true" title="some string some string"

【解决方案4】：

如果您使用 qTip，&lt;br /&gt; 确实有效

【讨论】：

【解决方案5】：

如果您使用的是 Jquery Tooltip 实用程序，那么在“jquery-ui.js”Javascript 文件中找到以下文本：

tooltip.find(".ui-tooltip-content").html(content);

放在上面

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

我希望这也对你有用。

【讨论】：

【解决方案6】：

&#013; 结合样式 white-space: pre-line; 对我有用。

【讨论】：

我花了一段时间试图让它工作。需要white-space: pre-line; 样式这一事实非常隐蔽。
@JimD 样式规则需要应用于什么类/元素？
对我来说，在工具提示上没有任何自定义 css 的情况下可以正常工作。
这是你要找的朋友。
其实字符应该是&#010;:stackoverflow.com/questions/6502054/…

【解决方案7】：

对我来说，两步解决方案（格式化标题和添加样式的组合）起作用，如下所示：

1) 格式化title 属性：

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

2) 将此样式添加到tips 元素：

white-space: pre-line;

在 IE8、Firefox 22 和 Safari 5.1.7 中测试。

【讨论】：

我认为代码中有断行会很麻烦

【解决方案8】：

我的解决方案是http://jqueryui.com/tooltip/：

这里的代码（使 工作的脚本部分是“内容：”）：

HTML 头

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

ASPX 或 HTML 控件

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

希望这对某人有所帮助

【讨论】：

【解决方案9】：

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

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

在这里找到： How to make Twitter bootstrap tooltips have multiple lines?

【讨论】：

@Dan 来这里寻求帮助。我的工具提示文本在框外继续。这行得通！ +1

【解决方案10】：

Grater than Jquery UI 1.10 不支持在title属性中使用html标签，因为它不是有效的html。

因此，替代解决方案是使用工具提示内容选项。参考-http://api.jqueryui.com/tooltip/#option-content

【讨论】：

【解决方案11】：

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

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

这对我有用，并且在后面的代码中使用。

希望这对你有用

【讨论】：

【解决方案12】：

使用

&#013

应该没有 ;特点。

【讨论】：

【解决方案13】：

javascript 版本

由于&#013;（html）是0D（十六进制），这可以表示为'\u000d'

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

另外，

与大家分享一个 AngularJS 过滤器，感谢 other answers 中的引用，用该字符替换 \n

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

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

用法

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

【讨论】：

【解决方案14】：

如果您使用的是 jquery-ui 1.11.4：

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        content: function() {
            // support: IE<9, Opera in jQuery <1.7
            // .text() can't accept undefined, so coerce to a string
            var title = $( this ).attr( "title" ) || "";
            // Escape title, since we're going from an attribute to raw HTML
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },

【讨论】：

【解决方案15】：

只需添加一个数据属性

data-html="true"

你可以走了。

例如。用法：

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

到目前为止，它在我尝试过的大多数工具提示插件中都有效。

【讨论】：

标题文本中带有
的 data-html="true" 效果很好。
以上解决方案都不适合我。但是这个很好用。
我相信在“”之前缺少一个“>”我试图编辑自己，但“编辑队列”已满。
这不需要引导程序吗？ OP 正在使用<title>
对我不起作用。角 10。

【解决方案16】：

只需添加 data-html="true"

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

【讨论】：

【解决方案17】：

\n

造型

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

为我工作。

【讨论】：

【解决方案18】：

AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip、uib-tooltip-template 和 uib-tooltip-html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

就我而言，我选择了 uib-tooltip-html，它包含三个部分：

配置
控制器
HTML

示例：

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

更多信息，请查看here

【讨论】：

【解决方案19】：

使用 .html() 而不是 .text() 对我有用。例如

.html("This is a first line." + "<br/>" + "This is a second line.")

【讨论】：

【解决方案20】：

使用 &#13; 应该可以工作（我已经在 Chrome、Firefox 和 Edge 中进行了测试）：

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>

【讨论】：

【解决方案21】：

只需在标题属性中使用实体代码&#xA; 换行即可。

&lt;a title="First Line &amp;#xA;Second Line"&gt;Hover Me &lt;/a&gt;

【讨论】：

【解决方案22】：

只需在脚本中添加这段代码 sn-p：

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

当然，如上所述，data-html 应该是"true"。这将允许您在 title 属性的值内使用 html 标记和格式。

【讨论】：

+1，您的解决方案有效。我的示例代码：data-toggle="tooltip" data-html="true" title="some string some string" .
很高兴听到这个消息 ?

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

这个 CSS 会帮助你。

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }

【讨论】：

【解决方案25】：

您好，此代码适用于所有浏览器！！我使用过用于 chrome 和 safari 中的新行以及用于 IE 的 ul li

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }

【讨论】：

【解决方案26】：

您可以使用引导工具提示，并且不要忘记将 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>

【讨论】：

【解决方案27】：

因此，如果您使用的是 bootstrap4，那么这将起作用。

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

</style>

<script> 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

如果您在 Django 项目中使用，那么我们还可以在工具提示中显示动态数据，例如：

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>

【讨论】：