Всплывающая подсказка jQuery

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

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>

Ответы

Ответ 1

Вы можете использовать опцию "content" виджета всплывающей подсказки. См. Также:

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

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

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });

Ответ 2

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

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

Вы также можете использовать pre или pre-wrap вместо pre-line, если хотите сохранить пробелы. См. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Ответ 3

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

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

лучше использовать это:

$(document).tooltip({
   content: function () {
     return $( this ).prop( 'title' ).replace( '|', '<br />' );
   }
});

с function(callback) У меня была проблема с всплывающими подсказками, которая не была закрыта

Ответ 7

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

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

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

Ответ 8

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

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});