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();

Prophase

Can you please show the code that you're using? – Extracanonical

@Extracanonical code added – Prophase

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

Armorial

@funerr: Why not using div.tooltip-inner { max-width: none; }? Then it's never bounded anymore?! – Hainaut

@Hainaut because you probably want the tooltip text to wrap at some point. – Cauca

what if title text is too long and without space. Then this condition will also fail. – Peti

Just setting .tooltip-inner { max-width: ... } works in Bootstrap 4! – Brister

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

Selfcentered

I removed the white-space:nowrap; and entered in a 1,000 character tooltip. It worked okay in Firefox (but the issue has always been with IE's 512 limit), so when I tried it in IE, it hung up my cursor and spiked my CPU - no tooltip appeared. Crazy! All that from a tooltip. Too bad I cannot embed a link to more info (that could pop-out more info) in the tooltip. – Sclerosis

Answer 3

You could use this source for better results:

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

Billow

word-wrap: break-word; may better – Katzman

Answer 4

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

This is probably not a good idea in most cases since you would be applying styles directly to the element, but it's worth noting that this is possible for those few cases where 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 option:

Base HTML to use when creating the tooltip.

The tooltip's title will be injected into the .tooltip-inner.

.tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.

Defaults to:

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

As an alternative, you can add your own class to the template and style the custom 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;
}

Arsphenamine

This suit better for me. Coz I dont want to effect my whole system but only on particular case – Amphicoelous