Visualizzazione di testo lungo nel suggerimento Bootstrap

Question

Sto tentando di visualizzare un po 'di testo lungo in un tooltip di avvio di Twitter. Come puoi vedere nella foto qui sotto, le cose non stanno andando in modo schiacciante. Qualcuno ha una soluzione facile per il testo che trabocca il suggerimento di bootstrap?

EDIT (codice aggiunto richiesto):

Nel mio controller:

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
      ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
      productName + "</a> 

A mio avviso:

$('.auto-tooltip').tooltip(); 

Answer 1

Io non sono molto sicuro della tua codice,
ecco un esempio con un lungo valore tool-tip:

Elemento:

<a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a> 

Js:

$(document).ready(function() { 
    $("a").tooltip({ 
    'selector': '', 
    'placement': 'top', 
    'container':'body' 
    }); 
}); 

Css:

/*Change the size here*/ 
div.tooltip-inner { 
    max-width: 350px; 
} 

Demo: on JsBin.com

Answer 2

come suggerito in the documentation, il modo più semplice per garantire che il tooltip non va a capo a tutti è quello di utilizzare

 .tooltip-inner { 
      max-width: none; 
      white-space: nowrap; 
     } 

Con questo, non devi preoccuparti di valori dimensionali o qualcosa di simile . Il problema principale è che se si dispone di una linea di testo molto lunga, verrà semplicemente visualizzata sullo schermo (come si può vedere nel numero JSBin Example).

Answer 3

Si potrebbe utilizzare questa fonte per ottenere risultati migliori:

.tooltip-inner { 
word-break: break-all; 
} 

Answer 4

In alternativa al styling dei .tooltip-inner in un foglio di stile è possibile aggiungere gli stili direttamente al tooltip modificando il modello del tooltip .

Probabilmente questa non è una buona idea nella maggior parte dei casi poiché applicheremo gli stili direttamente all'elemento, ma vale la pena notare che questo è possibile per quei pochi casi in cui questa è l'unica opzione o per qualche motivo è la migliore opzione.

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>', 
}); 

Oppure, come un attributo:

<span 
    data-toggle="tooltip" 
    title="Lorem ipsum ..." 
    data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>' 
    >Some abbreviation</span> 

$(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

template opzione:

HTML di base da utilizzare durante la creazione del tooltip.

I tooltip title verranno immessi nel .tooltip-inner.

.tooltip-arrow diventerà la freccia del tooltip.

L'elemento wrapper più esterno deve avere la classe .tooltip.

default è:

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' 

In alternativa, è possibile aggiungere la propria classe per il modello e lo stile della classe personalizzata.

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>', 
}); 

.my-custom-tooltip { 
    max-width: none; 
}