Итак, я хочу взять содержимое div, в котором у меня есть несколько <br/>, а затем передать его как атрибут title, используя виджет подсказки jQuery. Я хочу, чтобы линии появлялись одна под другой внутри всплывающей подсказки. Спасибо. код до сих пор:

CSS

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>
29
ChrisGP 30 Янв 2013 в 12:27

7 ответов

Лучший ответ

Вы можете использовать опцию «content» виджета подсказки. Смотрите также:

http://jqueryui.com/tooltip/#custom-content

Краткий пример:

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });
10
Teun Lassche 30 Янв 2013 в 08:34

Просто используйте объект &#10; для перевода строки в атрибуте title.

15
Ravi Gadag 30 Янв 2013 в 08:35

Есть чистое решение CSS. Используйте \ n для перевода строки и добавьте этот стиль CSS:

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

Вы также можете использовать предварительную или предварительную переноску вместо предварительной, если вы хотите сохранить пробелы. См. https://developer.mozilla.org/en-US/docs/Web/CSS / бело- пространство

54
zooglash 28 Авг 2014 в 08:37

Я использовал это:

        $("[title]").each(function(){
            $(this).tooltip({ content: $(this).attr("title")});
        });

Это означает, что все элементы с атрибутом title будут использовать подсказку jquery, а содержимое подсказки будет использовать значение атрибута title. Содержание позволяет HTML.

2
Ronen Festinger 10 Июн 2013 в 12:36

Вы можете ввести свой HTML-код непосредственно в атрибут Title и затем просто вызвать следующее:

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

Таким образом, ваш HTML отображается, а не экранируется и буквально пишется.

6
JDandChips 2 Окт 2013 в 08:41

Это мой трюк, чтобы сделать это с последними jquery / jqueryui (при условии, что все элементы, которые вы хотите иметь во всплывающих подсказках, имеют класс 'jqtooltip', у них есть теги заголовка, а заголовок имеет символ канала для разделителя строк:

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});
15
Scott R. Frost 18 Апр 2013 в 20:33

Я пошел с измененной версией ответа СкоттаФроста. Проблема с его примером заключается в том, что .replace заменяет только первый экземпляр символа в строке. Вот модифицированная версия, которая будет использовать регулярное выражение / g (global) для изменения всех вхождений символа во всей строке.

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});
2
LukeP 8 Ноя 2013 в 17:45