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