Como quebrar a linha na dica de ferramenta do jQueryUI

A nova versão do jQueryUI (1.9) vem com o widget nativo de dica de ferramenta. Depois de testar com ele, funciona bem se o conteúdo (valor do atributo title) for curto. Mas se o conteúdo for longo, a dica de ferramenta, uma vez exibida, irá sobrepor o texto de input.

uma demonstração no site oficial.

Quando você passa o cursor do mouse sobre o texto Sua idade , a dica exibida sobrepõe a input de texto. Não tenho certeza se esse é o comportamento desejado do widget. Eu gostaria que ele ficasse no lado direito da input de texto e quebrasse linhas, se necessário.

Editar: A página de demonstração não mostra mais o problema original, pois a demonstração foi atualizada para usar o jQueryUI v1.10, no qual o código de posição foi atualizado para melhor posicionar a dica de ferramenta – consulte http://api.jqueryui.com/tooltip/# posição da opção

Eu recriou uma demonstração do problema original no jsFiddle .

O posicionamento da dica é controlado por um object jQueryUI Position e as configurações padrão são:

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

O Objeto de Posição , em particular o atributo de collision pode ser alterado para forçar o posicionamento do controle em outro local. O padrão para dicas de ferramentas é flipfit, o que significa que se o padrão (à direita) não couber, ele irá virar para a esquerda e tentar essa posição e se isso não colidir com nada, tente ajustar o controle movendo-o para longe de a borda da janela. O resultado é que agora colide com o . Não parece haver uma opção para forçar uma longa dica de ferramenta a ser usada de maneira inteligente.

No entanto, existem duas maneiras de agrupar o conteúdo:

Adicione uma class CSS personalizada à configuração com uma max-width para forçar o agrupamento, por exemplo:

JavaScript

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

CSS

 .tooltip { max-width:256px; } 

Ou insira quebra de linha rígida
no atributo title, por exemplo

 title="Lorem ipsum dolor sit amet,
consectetur adipisicing elit"

Edit: Então parece que jQueryUI mudou a opção de conteúdo tooltip entre v1.9 e v1.10 (de acordo com o changelog ). Para referência, aqui está a diferença:

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

Então você pode colocar de volta a funcionalidade mais antiga que não escape
tags no atributo title usando o .tooltip() assim:

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

Além disso, veja a demonstração do jsFiddle .

Este é o meu truque para fazer isso com o mais recente jquery / jqueryui

Assumindo que todos os itens que você deseja que tenham dicas de ferramentas tenham class ‘jqtooltip’, eles têm tags de título e o título tem um caractere de pipe para um separador de linha.

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

Eu tenho uma solução para o jQuery 2.1.1, semelhante à solução do @Taru.

Basicamente, temos que usar a chamada de conteúdo da dica de ferramenta para obter dinamicamente os dados do elemento. O elemento em si pode ter qualquer marcação html. Note que você precisa importar

Então, onload, eu faço isso:

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

E meu elemento de exemplo é este:

 
hover me

Isso funciona:

HTML

 

AB PNEU 700 X 23 FOLD CORPRO

JavaScript

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