Подсказка JQuery, поддерживающая новую строку - PullRequest
Новая
       24

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

14 голосов
/ 20 декабря 2010

Я ищу легкий плагин jquery для отображения всплывающих подсказок, когда пользователь наводит курсор на элемент.Я бы хотел, чтобы плагин получал содержимое из атрибута title, а также важно, чтобы я мог создавать новые строки.

Любая помощь приветствуется!

Ответы [ 7 ]

15 голосов
/ 01 февраля 2013

В 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>
15 голосов
/ 20 декабря 2010

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

Вы можете добавить любой html-элемент в tipsy, так что <br/> работает.

Вам просто нужно пройтиОпция html как таковая: 

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

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

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

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

9 голосов
/ 29 мая 2013

Этот код заставляет работать br в теге title! 

$(document).tooltip({
    content: function() {
        var element = $(this);
        return element.attr("title");
    }
});
1 голос
/ 20 декабря 2010

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

0 голосов
/ 07 сентября 2017

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

$(document).ready(function(){

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

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

title=text1<br/>text2
0 голосов
/ 20 декабря 2010

Простое пользовательское расширение 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();.

0 голосов
/ 20 декабря 2010

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

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

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

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

...