Jeff Borden Jeff Borden - 1 year ago 131
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:


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download