Wyświetlanie długiego tekstu w podpowiedzi Bootstrap

Question

Próbuję wyświetlić trochę długiego tekstu w etykiecie bootstrap programu Twitter. Jak widać na poniższym obrazku, rzeczy nie idą w miażdżący sposób. Czy ktoś ma łatwą poprawkę dla tekstu, który przepełnia etykietę ładowania początkowego?

EDIT (kod dodaje wymagane):

W moim kontrolera:

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

Moim zdaniem:

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

Answer 1

nie jestem całkiem pewien swojej kod,
tutaj jest przykładem z Wartość długości narzędzia wskazówka:

elementu:

<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

Jak zasugerował in the documentation, najprostszym sposobem, aby upewnić się, że etykietka nie owijać w ogóle jest użycie

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

z tym, że nie trzeba się martwić o wartości wymiaru lub coś podobnego . Głównym problemem jest to, że jeśli masz bardzo długą linię tekstu, to po prostu zniknie z ekranu (jak widać w JSBin Example).

Answer 3

Można użyć tego źródła dla lepszych wyników:

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

Answer 4

Jako alternatywę do stylizacji .tooltip-inner w arkuszu stylów można dodać style bezpośrednio do tooltip poprzez modyfikację szablonu podpowiedzi .

W większości przypadków nie jest to dobry pomysł, ponieważ można zastosować style bezpośrednio do elementu, ale warto zauważyć, że jest to możliwe w tych niewielu przypadkach, w których jest to jedyna opcja lub z jakiegoś powodu jest najlepsza opcja.

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

Albo, jako atrybut:

<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 opcja:

Baza HTML do wykorzystania przy tworzeniu podpowiedź.

Etykieta narzędziowa title zostanie wprowadzona do .tooltip-inner.

.tooltip-arrow stanie się strzałką podpowiedzi.

Najbardziej zewnętrzny element opakowania powinien mieć klasę .tooltip.

Domyślnie:

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

Jako alternatywę można dodać własną klasę i styl szablonu klasy zwyczaj.

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