在工具提示中添加换行符

如何在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

其他回答

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

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

2018-02-23 03:50:14

在原生HTML工具提示中添加换行符是可能的，只需将标题属性分布在多行中即可。

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

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

编辑:第一个语句的更正。

2010-07-27 04:47:11

& lt; br /比;如果你在使用qTip，你做了什么工作

2013-01-25 21:06:51

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

只需使用实体代码
用于标题属性中的换行符。

<a title="First Line 
Second Line">Hover Me </a>

2019-03-18 14:27:45

在工具提示中添加换行符

推荐文章

最新文章

标签