Bagaimana jeda baris dapat ditambahkan dalam tooltip HTML?

Saya mencoba menggunakan <br/>dan \ndi dalam tooltip sebagai berikut:

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

Namun, ini tidak berguna dan saya bisa melihat teks literal <br/>dan \ndi dalam tooltip. Setiap saran akan sangat membantu.

Cukup gunakan kode entitas 
untuk linebreak dalam atribut title.

Cukup tambahkan atribut data

data-html = "true"

dan kamu baik untuk pergi.

Misalnya. pemakaian:

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

Ini telah berfungsi di sebagian besar plugin tooltip yang telah saya coba sampai sekarang.

The 
dikombinasikan dengan gaya white-space: pre-line; bekerja untukku.

CSS ini yang akhirnya bekerja untuk saya bersama dengan linefeed di editor saya:

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

Ditemukan di sini: Bagaimana membuat tooltips bootstrap Twitter memiliki beberapa baris?

Beri di \nantara teks. Ini bekerja di semua browser.

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

Ini akan bekerja untuk saya dan digunakan dalam kode di belakang.

Semoga ini berhasil untuk Anda

\n

dengan styling

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

bekerja untukku.

Aku menemukannya. Itu bisa dilakukan hanya dengan melakukan seperti ini

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

Versi javascript

Karena 
(html) adalah 0D(hex), ini dapat direpresentasikan sebagai'\u000d'

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

Sebagai tambahan,

Berbagi dengan Anda filter AngularJS yang menggantikan \nkarakter itu berkat referensi di jawaban lain

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

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

pemakaian

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

cukup gunakan \ n pada judul dan tambahkan css ini

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

<br /> tidak berfungsi jika Anda menggunakan qTip

Cukup tambahkan data-html = "true"

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

adalah mungkin untuk menambahkan linebreak dalam tooltips HTML asli dengan hanya memiliki atribut judul yang tersebar di beberapa baris.

Namun, saya akan merekomendasikan menggunakan plugin tooltip jQuery seperti Q-Tip: http://craigsworks.com/projects/qtip/ .

Mudah diatur dan digunakan. Atau ada banyak plugin tooltip javascript gratis juga.

sunting: koreksi pada pernyataan pertama.

Bagi saya, solusi 2 langkah (kombinasi memformat judul dan menambahkan gaya) berfungsi, sebagai berikut:

1) Format titleattrbiute:

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

2) Tambahkan gaya ini ke tipselemen:

white-space: pre-line;

Diuji dalam IE8, Firefox 22, dan Safari 5.1.7.

Cukup tambahkan potongan kode ini di skrip Anda:

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

dan tentu saja sebagaimana disebutkan dalam jawaban di atas data-htmlseharusnya "true". Ini akan memungkinkan Anda untuk menggunakan tag html dan memformat di dalam nilai titleatribut.

Nah jika Anda menggunakan utilitas Jquery Tooltip , maka dalam file Javascript "jquery-ui.js" temukan teks berikut:

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

dan letakkan di atas itu

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

Saya harap ini juga akan bekerja untuk Anda.

Jadi jika Anda menggunakan bootstrap4 maka ini akan berhasil.

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

Jika Anda menggunakan dalam proyek Django maka kami juga dapat menampilkan data dinamis di tooltips seperti:

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

Solusi untuk saya adalah http://jqueryui.com/tooltip/ :

Dan di sini kode (bagian skrip yang membuat <br/>Karya adalah "konten:"):

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

Kontrol ASPX atau HTML

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

Semoga ini bisa membantu seseorang

Grater dari Jquery UI 1.10 tidak mendukung untuk menggunakan tag html di dalam atribut title karena htmlnya tidak valid.

Jadi solusi alternatifnya adalah dengan menggunakan opsi konten tooltip. Rujuk - http://api.jqueryui.com/tooltip/#option-content

Menggunakan

&#013

Seharusnya tidak ada; karakter.

jika Anda menggunakan 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 dan 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

Dalam kasus saya, saya memilih uib-tooltip-html dan ada tiga bagian:

1. konfigurasi
2. pengontrol
3. HTML

Contoh:

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

Untuk informasi lebih lanjut, silakan cek di sini

Menggunakan .html () alih-alih .text () bekerja untuk saya. Sebagai contoh

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

Penggunaan 
harus berfungsi (Saya sudah menguji di Chrome , Firefox dan 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>

Hai kode ini akan bekerja di semua browser !! saya digunakan untuk baris baru di chrome dan safari dan ul li untuk 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;
            }
        }

Anda dapat menggunakan tooltip bootstrap, dan jangan lupa untuk mengatur opsi html menjadi 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>

Cukup gunakan kode entitas 
untuk linebreak dalam atribut title.

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

Css ini akan membantu Anda.

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

or if you want in one line

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