发表新帖
发表新帖

Add line break within tooltips

后端 未结
关注
27 2303
北恋
北恋 2020-11-28 02:23

How can line breaks be added within a HTML tooltip?

I tried using
and \\n within the tooltip as follows:
相关标签:
27条回答
  • 孤街浪徒
    2020-11-28 02:33

    Give \n between the text. It work on all browsers.

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

    This will work for me and it's used in code behind.

    Hope this will work for you

    0 讨论(0)
  • 春和景丽
    2020-11-28 02:33

    The solution for me was http://jqueryui.com/tooltip/:

    And here the code (the part of script that make <br/> Works is "content:"):

    HTML HEAD

    <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 or HTML control

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

    Hope this help someone

    0 讨论(0)
  • 醉梦人生
    2020-11-28 02:34

    The javascript version

    Since &#013; (html) is 0D (hex), this can be represented as '\u000d'

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

    In addition,

    Sharing with you guys an AngularJS filter that replaces \n with that character thanks to the references in the other answers

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

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

    usage

    <div title="{{ message | titleLineBreaker }}"> </div>
    0 讨论(0)
  • [愿得一人]
    2020-11-28 02:34

    Using .html() instead of .text() worked for me. For example

    .html("This is a first line." + "<br/>" + "This is a second line.")
    0 讨论(0)
  • 不思量自难忘°
    2020-11-28 02:35

    just use \n in title and add this css

    .tooltip-inner {
    white-space: pre-wrap;
}
    0 讨论(0)
  • 遥遥无期
    2020-11-28 02:35

    You can use bootstrap tooltip, and don't forget to set the html option to 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>
    0 讨论(0)
 看不清?
提交回复
热议问题