Làm thế nào có thể ngắt dòng được thêm vào trong một tooltip HTML?

Tôi đã thử sử dụng <br/>và \ntrong tooltip như sau:

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

Tuy nhiên, điều này là vô ích và tôi có thể thấy văn bản bằng chữ <br/>và \ntrong chú giải công cụ. Bất kỳ đề xuất sẽ rất hữu ích.

Chỉ cần sử dụng mã thực thể 
để ngắt dòng trong thuộc tính tiêu đề.

Chỉ cần thêm một thuộc tính dữ liệu

dữ liệu-html = "đúng"

và bạn tốt để đi.

Ví dụ. sử dụng:

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

Nó đã làm việc trong hầu hết các plugin tooltip mà tôi đã thử cho đến nay.

Sự 
kết hợp với phong cách không gian trắng: tiền tuyến; đã làm cho tôi.

CSS này là thứ cuối cùng đã làm việc cho tôi kết hợp với nguồn cấp dữ liệu trong trình chỉnh sửa của tôi:

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

Tìm thấy ở đây: Làm thế nào để làm cho các công cụ bootstrap Twitter có nhiều dòng?

Đưa ra \ngiữa các văn bản. Nó hoạt động trên tất cả các trình duyệt.

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

Điều này sẽ làm việc cho tôi và nó được sử dụng trong mã phía sau.

Hy vọng điều này sẽ làm việc cho bạn

\n

với kiểu dáng

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

đã làm cho tôi.

Tôi tìm thấy nó. Nó có thể được thực hiện bằng cách đơn giản làm như thế này

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

Phiên bản javascript

Vì 
(html) là 0D(hex), nên điều này có thể được biểu diễn dưới dạng'\u000d'

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

Ngoài ra,

Chia sẻ với các bạn một bộ lọc AngularJS thay thế \ncho nhân vật đó nhờ các tham chiếu trong các câu trả lời khác

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

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

sử dụng

<div title="{{ message | titleLineBreaker }}"> </div>

chỉ cần sử dụng \ n trong tiêu đề và thêm css này

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

<br /> đã làm việc nếu bạn đang sử dụng qTip

Chỉ cần thêm dữ liệu-html = "true"

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

có thể thêm các ngắt dòng trong các chú giải công cụ HTML gốc bằng cách đơn giản là có thuộc tính tiêu đề trải rộng trên các dòng đột biến.

Tuy nhiên, tôi khuyên bạn nên sử dụng một plugin tooltip jQuery như Q-Tip: http://craigswork.com/projects/qtip/ .

Nó là đơn giản để thiết lập và sử dụng. Ngoài ra, có rất nhiều plugin tooltip javascript miễn phí xung quanh.

chỉnh sửa: chỉnh sửa trên tuyên bố đầu tiên.

Đối với tôi, một giải pháp 2 bước (kết hợp định dạng tiêu đề và thêm kiểu) đã hoạt động như sau:

1) Định dạng titleattrbiute:

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

2) Thêm phong cách này vào thành tipsphần:

white-space: pre-line;

Đã thử nghiệm trong IE8, Firefox 22 và Safari 5.1.7.

Chỉ cần thêm đoạn mã này vào tập lệnh của bạn:

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

và ofcference như đã đề cập trong câu trả lời ở trên data-htmlnên được "true". Điều này sẽ cho phép bạn sử dụng các thẻ html và định dạng bên trong giá trị của titlethuộc tính.

Chà, nếu bạn đang sử dụng tiện ích Jquery Tooltip , thì trong tệp Javascript "jquery-ui.js" hãy tìm văn bản sau:

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

và đặt lên trên đó

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

Tôi hy vọng điều này cũng sẽ làm việc cho bạn.

Vì vậy, nếu bạn đang sử dụng bootstrap4 thì nó sẽ hoạt động.

<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>

Nếu bạn đang sử dụng trong dự án Django thì chúng tôi cũng có thể hiển thị dữ liệu động trong các chú giải công cụ như:

<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>

Giải pháp cho tôi là http://jqueryui.com/tooltip/ :

Và đây là đoạn mã (phần kịch bản tạo ra <br/>Tác phẩm là "nội dung:"):

Đầu 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>

Kiểm soát ASPX hoặc HTML

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

Hy vọng điều này sẽ giúp ai đó

Grater hơn Jquery UI 1.10 không hỗ trợ sử dụng thẻ html bên trong thuộc tính title vì html không hợp lệ.

Vì vậy, giải pháp thay thế là sử dụng tùy chọn nội dung tooltip. Tham khảo - http://api.jqueryui.com/tooltip/#option-content

Sử dụng

&#013

Không nên có bất kỳ; tính cách.

nếu bạn đang sử dụng 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 );
             },

AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip, uib-tooltip-template và 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

Trong trường hợp của tôi, tôi đã chọn uib-tooltip-html và có ba phần cho nó:

1. cấu hình
2. bộ điều khiển
3. HTML

Thí dụ:

(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>

Để biết thêm thông tin, xin vui lòng kiểm tra ở đây

Sử dụng .html () thay vì .text () làm việc cho tôi. Ví dụ

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

sử dụng 
nên hoạt động (Tôi đã thử nghiệm trong Chrome , Firefox và 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>

Xin chào, mã này sẽ hoạt động trong tất cả các trình duyệt !! Tôi đã sử dụng cho dòng mới trong chrome và safari và ul li cho IE

 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;
            }
        }

Bạn có thể sử dụng công cụ bootstrap và đừng quên đặt tùy chọn html thành 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>

Chỉ cần sử dụng mã thực thể 
để ngắt dòng trong thuộc tính tiêu đề.

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

Css này sẽ giúp bạn.

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

or if you want in one line

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