170

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

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

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

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

html tooltip newline

— 阿卡什（Aakash Chakravarthy）
source

3

我已经有同样的问题：stackoverflow.com/questions/3320081/...

— 圣

1

使用<pre> data-html =“ true” </ pre>参考，并感谢：stackoverflow.com/a/19001875/2278891

— Sunit 2014年

在asp.net（C＃.NET 4.5 Framework）中，添加代码的Environment.NewLine工作是从代码端添加换行符...没有大惊小怪..没有混乱...

— Dan B

270

只需将实体代码用于title属性中的换行符即可。

— 弗雷德·塞内斯（Fred Senese）
source

17

如果实体代码＆＃013; 不起作用，请尝试＆＃10; 我正在使用linux和chrome不确定其他浏览器

— 克里希纳

3

我尝试了这一点，并且当我使用inspect元素注入它时可以使用，但是当我将其包含在html中并使用此字符进行部署时却无法使用。我可能会想念的任何明显原因吗？

— Riaan Schutte

1

对我&#10来说，Chrome v53在Windows中对我不起作用。但是效果很好。

— 幸运

9

我只是使用了这两个版本，
似乎都工作得很好:)

— Phe0nix

6

＆＃013; 在Firefox v58中不起作用。但是＆＃10确实可以正常工作。使用按需使用两个换行符的@ Phe0nix解决方案可以很好地使其在Chrome，Microsoft Edge和Firefox中运行。

— 很酷的

69

只需添加一个数据属性

data-html =“ true”

而且你很好。

例如。用法：

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

到目前为止，我已经尝试了大多数工具提示插件。

— 西瓦利克
source

3

标题文本中带有 的data-html =“ true”可以正常使用。

— 维克斯

1

以上解决方案均不适合我。但是这个很好用。

— 艾比

64

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

— 吉他工
source

3

我花了一段时间尝试使它起作用。white-space: pre-line;需要样式的事实非常隐蔽。

— Jim D

@JimD样式规则需要应用于什么类/元素？

— Judah Meek

对我来说，这很好，不需要在工具提示上自定义CSS。

— ST-DDT

2

这是您要寻找的朋友。

— Henrik Petterson

3

其实，性格应该是
：stackoverflow.com/questions/6502054/...

— 亨里克·彼得森

30

该CSS最终与我的编辑器中的换行符一起对我有用：

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

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

— 担
source

@Dan Came在这里寻求帮助。我的工具提示文字在框外继续。这工作了！+1

— IRGeekSauce

10

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

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

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

希望这对你有用

— 普里扬卡·塔库（Priyanka Thakur）
source

10

\n

与造型

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

为我工作。

— 克劳斯夫
source

4

我找到了。可以这样简单地完成

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

— 阿卡什（Aakash Chakravarthy）
source

4

javascript版本

由于（html）是0D（十六进制），因此可以表示为'\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>

— 约瑟夫·哈鲁什
source

4

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

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

— 达努什卡
source

3

  如果您正在使用qTip的话

— 爱德华多·莫尔蒂尼
source

3

只需添加data-html =“ true”

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

— 巴博·达比扬
source

2

只需将title属性分布在多个行上，就可以在本机HTML工具提示中添加换行符。

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

设置和使用很简单。另外，也有很多免费的javascript工具提示插件。

编辑：对第一条陈述的更正。

— 罗斯
source

2

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

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中进行了测试。

— 用户名
source

我认为代码中包含

— 折

2

只需在脚本中添加以下代码片段即可：

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

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

— 编码
source

+1，您的解决方案有效。我的示例代码： data-toggle="tooltip" data-html="true" title="some string some string"。

— Pranesh Janarthanan

很好听是👍

— 代码它

1

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

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

并放在上面

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

希望这对您也有用。

— 用户名
source

1

因此，如果您使用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>

— Mayank Chauhan
source

0

对我来说，解决方案是http://jqueryui.com/tooltip/：

这里的代码（使 Works生效的脚本部分是“ content：”）：

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>

希望这可以帮助某人

— 迭戈P
source

0

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

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

— 杰森
source

0

用

&#013

不应该有任何东西; 字符。

— 用户名
source

0

如果您使用的是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 );
             },

— 彼得
source

0

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>

欲了解更多信息，请点击这里

— 奥斯坦
source

0

使用.html（）而不是.text（）对我有用。例如

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

— 拉杰·斯塔（Raj Stha）
source

0

使用应该有效（我已经在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>

展开摘要

— Nourein
source

0

嗨，这段代码将在所有浏览器中正常工作！！我在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;
            }
        }

— Abhinavxeon
source

0

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

— 胺
source

-1

只需将实体代码
用于title属性中的换行符即可。

<a title="First Line &#xA;Second Line">Hover Me </a>

展开摘要

— 雷尼（Renish Gotecha）
source

-1

此CSS将为您提供帮助。

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

or if you want in one line

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

— 阿迪尔·哈雷尔（Adir Harel）
source

在工具提示中添加换行符

javascript版本

此外，