在工具提示中添加换行符

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

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

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

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

当前回答

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

2016-02-04 15:43:56

其他回答

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

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

2019-05-08 04:41:22

我的解决方案是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

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

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

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

2014-04-10 05:38:54

\n

在造型上

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

为我工作。

2017-10-24 09:56:38

在工具提示中添加换行符

推荐文章

最新文章

标签