Jeff Borden Jeff Borden - 4 months ago 33x
Javascript Question

Displaying long text in Bootstrap tooltip

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?

tooltip overflow

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:



I'm not sure about your code,
here is an example with a long tool-tip value:


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


$(document).ready(function () {
    'selector': '',
    'placement': 'top',


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

Demo: on