Display long text in Bootstrap tooltip

Question

I am trying to display a bit of long text in twitter bootstrap prompt. As you can see in the picture below, everything is not going better. Can anyone easily fix text that overflows a tooltip?

EDIT (added requested code):

In my controller:

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

In my opinion:

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

Answer 1

I'm not quite sure about your code,
Here is an example with a long hint value:

Element:

  <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: at JsBin.com

---

Obviously you can only change .tooltip-inner in Bootstrap 4, thanks @Felix Dombek

 .tooltip-inner { max-width: ... } 

Answer 2

As stated in the documentation , the easiest way to make sure the tooltip is not migrated at all is to use

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

In this case, you do not need to worry about the measurement values ​​or anything like that. The main problem is that if you have a very long line of text, it just disappears from the screen (as you can see in the JSBin example ).

Answer 3

You can use this source for best results:

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

Answer 4

As an alternative to styling .tooltip-inner in the stylesheet, you can add styles directly to the tooltip by modifying the tooltip template.

This is probably not a good idea in most cases, because you will apply styles directly to the element, but it is worth noting that this is possible for those few cases when this is the only option or for some reason is the best option.

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

Or, as an attribute:

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

The basic HTML to use when creating the tooltip.

The title tooltip will be entered in .tooltip-inner .

.tooltip-arrow will become a tooltip arrow.

The outer shell element must have a .tooltip class.

Default:

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

Alternatively, you can add your own class to the template and create your own class.

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