Как разбить строку в jQueryUI tooltip

В новую версию jQueryUI (1.9) входит встроенный виджет всплывающей подсказки. После тестирования с ним он отлично работает, если содержимое (значение атрибута title) является коротким. Но если контент длинный, подсказка, отображаемая после отображения, будет перекрывать текст ввода.

демонстрация на официальном сайте.

Когда вы наводите курсор мыши на текст Ваш возраст <input>, всплывающая подсказка перекрывает ввод текста. Я не уверен, что это желаемое поведение виджета. Я бы хотел, чтобы он оставался с правой стороны от ввода текста и разбивал линии, если это необходимо.

Изменить: Демонстрационная страница больше не показывает исходную проблему, так как демо было обновлено, чтобы использовать jQueryUI v1.10, в котором был обновлен код позиции, чтобы лучше разместить всплывающую подсказку - см. http://api.jqueryui.com/tooltip/#option-position

Я воссоздал демо-версию исходной проблемы на jsFiddle.

Ответ 1

размещение всплывающей подсказки управляется объектом jQueryUI Position, а значения по умолчанию:

{ my: "left+15 center", at: "right center", collision: "flipfit" }

Позиция Объект, в частности атрибут collision, можно изменить, чтобы принудительно разместить элемент управления остальное. Значение по умолчанию для всплывающих подсказок - это флипфит, который означает, что если значение по умолчанию (справа) не подходит, оно будет переворачиваться влево и попытаться выполнить эту позицию, и если это не столкнется ни с чем, попробуйте установить элемент управления, удалив его из край окна. В результате он теперь сталкивается с <input>. Кажется, что нет возможности принудительно использовать длинную подсказку.

Однако есть два способа обернуть содержимое:

Добавьте пользовательский класс CSS в конфигурацию с помощью max-width для принудительной упаковки, например:

JavaScript

$('input').tooltip({
    tooltipClass:'tooltip'
});

CSS

.tooltip {
    max-width:256px;
}

Или вставьте строковые разрывы строк <br/> в атрибуте title, например

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"

Изменить: Итак, похоже, что jQueryUI изменил параметр содержимого всплывающей подсказки между версиями v1.9 и v1.10 (согласно журнал изменений). Для справки здесь есть разница:

v1.9.2

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

v1.10

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
    return $( "<a>" ).text( title ).html();
}

Таким образом, вы можете вернуть старые функции, которые не пропускают теги <br/> в атрибуте title, используя .tooltip() следующим образом:

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

Также см. демонстрация jsFiddle.

Ответ 2

Это мой трюк, чтобы сделать это с помощью последнего jquery/jqueryui

Предполагая, что все элементы, которые вы хотите иметь всплывающие подсказки, имеют класс jqtooltip, у них есть теги заголовков, а заголовок имеет символ канала для разделителя строк.

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

Ответ 3

У меня есть решение для jQuery 2.1.1, аналогичное решению @Taru.

В принципе, мы должны использовать вызов содержимого подсказки для динамического получения данных из этого элемента. Сам элемент может содержать любую html-разметку. Обратите внимание, что вам нужно импортировать

Итак, onload, я делаю это:

$(function() {
    $( document ).tooltip({
      content:function(){
        return this.getAttribute("title");
      }
    });
  });

И мой примерный элемент:

<div title="first<br/>second<br/>">hover me</div>

Ответ 4

Это работает:

HTML

<div class="produtos">
    <div class="produtos_imagem">
        <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/>
    </div>
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p>
</div>

JavaScript

$(document).tooltip({
    content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});