Come interrompere la riga in jQueryUI tooltip

Question

La nuova versione di jQueryUI (1.9) viene fornita con il widget tooltip nativo. Dopo aver testato con esso, funziona bene se il contenuto (valore dell'attributo titolo) è breve. Ma se il contenuto è lungo, il suggerimento, una volta visualizzato, si sovrapporrà al testo di input.

C'è a demo sul sito ufficiale.

Quando si passa il cursore del mouse sul tua età testo <input>, la descrizione comandi visualizzato sovrappone il metodo di scrittura. Non sono sicuro se questo è il comportamento desiderato del widget. Mi piacerebbe che restasse sul lato destro dell'input del testo e interrompesse le linee se necessario.

Edit: La pagina di prova non mostra più il problema originale dal momento che la demo è stato aggiornato per utilizzare jQueryUI v1.10 in cui il codice posizione è stata aggiornata al posto migliore il tooltip - vedi http://api.jqueryui.com/tooltip/#option-position

Ho ricreato uno demo of the original problem on jsFiddle.

Answer 1

La placement del tooltip è controllato da un oggetto jQueryUI posizione e le impostazioni di default sono:

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

Il Position oggetto, in particolare l'attributo collision può essere modificato per forzare il posizionamento del controllo da qualche altra parte. L'impostazione predefinita per i suggerimenti è flipfit il che significa che se il valore predefinito (a destra) non si adatta sarà capovolgere a sinistra e provare quella posizione e se non si scontrano con qualcosa, provare a in forma controllo spostandolo lontano dal bordo della finestra. Il risultato è che ora si scontra con lo <input>. Non sembra esserci un'opzione per forzare un lungo tooltip ad avvolgere abilmente.

Tuttavia ci sono due modi per avvolgere il contenuto:

aggiungere una classe CSS personalizzato per la configurazione con un max-width per forzare imballaggio, per esempio:

JavaScript

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

CSS

.tooltip { 
    max-width:256px; 
} 

Oppure inserire hard line-bre AKS <br/> nel attributo title, per esempio

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

Edit: Quindi sembra che jQueryUI cambiato il opzione contenuto tooltip tra v1.9 e v1.10 (secondo the changelog). Per avere un riferimento qui è la differenza:

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(); 
} 

Così si può rimettere la funzionalità più vecchio che non sfugge <br/> tag nel titolo attributo tramite .tooltip() in questo modo:

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

Inoltre, vedere jsFiddle demo.

Answer 2

Questo funziona:

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" 
    } 
}); 

Answer 3

Questo è il mio trucco per farlo con le ultime jquery/jQueryUI

E 'assum tutti gli elementi che si desidera avere i tooltip hanno classe 'jqtooltip', hanno tag title e il titolo ha un carattere pipe per un separatore di riga.

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

Answer 4

Ho una soluzione per jQuery 2.1.1, simile alla soluzione di @ Taru.

Fondamentalmente, dobbiamo utilizzare la chiamata di contenuto di tooltip per ottenere in modo dinamico i dati dall'elemento. L'elemento stesso può contenere qualsiasi markup html. Si noti che è necessario importare

Quindi, onload, faccio questo:

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

E il mio elemento di esempio è questo:

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