在工具提示中添加换行符

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

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

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

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

当前回答

只需在脚本中添加以下代码片段:

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

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

2019-04-06 18:18:01

其他回答

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

这里的代码(脚本中使<br/>工作的部分是"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>

希望这对大家有所帮助

2013-09-04 16:29:57

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

所以另一种解决方案是使用工具提示内容选项。参考- http://api.jqueryui.com/tooltip/#option-content

2014-04-10 05:38:54

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

2020-06-05 12:12:19

嗨，这段代码将在所有浏览器中工作!!我使用用于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;
            }
        }

2019-11-13 08:52:37

\n

在造型上

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

为我工作。

2017-10-24 09:56:38

在工具提示中添加换行符

推荐文章

最新文章

标签