Всплывающая подсказка JQuery, поддерживающая новую строку

Ответ 1

Обычно я использую tipsy.

Вы можете добавить любой элемент html в подвыпивший, поэтому <br/> работает.

Вам просто нужно передать параметр html как таковой:

$('#example-html').tipsy({html: true });

Если вы не хотите использовать атрибут title для отображения html (в этом случае он не будет проверяться), вы можете использовать параметр fallback.

$('#example-fallback').tipsy({fallback: "Where my tooltip yo'? <br/> yay !" });

Дополнительные параметры и примеры на подвыпительной веб-странице.

Ответ 2

В jQuery 1.9 (jquery + jquery-ui) и стандартной функции toolTip используйте это:

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

И затем в заголовке вы можете использовать HTML или.

Пример:

<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

Ответ 3

Этот код делает команду br в теге title!

$(document).tooltip({
    content: function() {
        var element = $(this);
        return element.attr("title");
    }
});

Ответ 4

http://elliotlings.com/jquery/tooltip является хорошей подсказкой для управления всплывающими подсказками, которые должны содержать больше контента

Ответ 5

Большинство браузеров (не Firefox или Opera - символы новой строки исчезнут) поддерживают символы новой строки в атрибуте title.

Если ваш плагин не отображает их как <br />, сначала сделайте это в тексте...

var tooltip = $('#whatever').attr('title').replace(/\n/g, '<br />');

... и затем передайте tooltip в вашу библиотеку всплывающих подсказок (например, qTip).

Ответ 6

Простой пользовательский расширение jQuery:

$.fn.extend({
  myToolTip: function() {
    this.hover(
      // mouse in ...
      function () { 
        var $this = $(this);
        if ($this.attr("title")) {
          $this.data("$tooltip", $("<div class='myToolTip'></div>")
            .text($this.attr("title"))
            .html(function(i, html) { return html.replace(/\n/g, "<br/>"); })
            .css({
              position: "absolute", 
              top: $this.position().top + $this.outerHeight(), 
              left: $this.position().left
            })
            .appendTo("body")
          );
        }
      },
      // mouse out ...
      function () {
        var $tooltip = $(this).data("$tooltip");
        if ($tooltip) $tooltip.remove();
      }
    );
  }
});

Это создает <div class="myToolTip"> (используйте CSS для его стилизации) и позиционирует его под соответствующим элементом в mouseenter. На mouseleave всплывающая подсказка снова удаляется. Разрывы строк в элементе title станут <br> в содержимом <div>, все остальное будет отображаться дословно.

Вызвать расширение через $(".someElements").myToolTip();.

Ответ 7

Вы можете использовать этот пример:

$(document).ready(function(){

  $(function () {
    $('[data-toggle="tooltip"]').tooltip({
        container : 'body',
        html: true
    });
  });
});

После добавления html-тега "
" внутри заголовка:

title=text1<br/>text2