Displaying long text in Bootstrap tooltip

Question

I'm trying to display a bit of long text in a twitter bootstrap tooltip. As you can see in the picture below, things aren't going smashingly. Does anyone have an easy fix for text that overflows the bootstrap 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 view:

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

Answer 1

I'm not quite sure about your code,
here is an example with a long tool-tip 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: on JsBin.com

---

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

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

Answer 2

As hinted at in the documentation, the easiest way to ensure that your tooltip does not wrap at all is to use

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

With this, you don't have to worry about dimension values or anything like that. Main problem being if you have a super long line of text it will just go off of the screen (as you can see in the JSBin Example).