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?

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:

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

Can you please show the code that you're using? – rink.attendant.6 Aug 29 '13 at 17:39 — rink.attendant.6, Aug 29 '13 at 17:39
@rink.attendant.6 code added – Jeff Borden Aug 29 '13 at 17:50 — Jeff Borden, Aug 29 '13 at 17:50

funerr · Accepted Answer · 2019-08-23T16:11:24.847

98

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

edited Aug 23 '19 at 16:11

answered Aug 29 '13 at 17:50

funerr

5,896
13
68
117

2

@funerr: Why not using `div.tooltip-inner { max-width: none; }`? Then it's never bounded anymore?! – algorhythm May 27 '15 at 14:20
3

@algorhythm because you probably want the tooltip text to wrap at some point. – bernk Sep 11 '15 at 22:44
what if title text is too long and without space. Then this condition will also fail. – Azam Alvi Oct 01 '15 at 10:41
Just setting `.tooltip-inner { max-width: ... }` works in **Bootstrap 4**! – Felix Dombek Jul 23 '17 at 18:50

score 32 · Answer 2 · edited Sep 05 '19 at 04:34

32

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

edited Sep 05 '19 at 04:34

Ry-

199,309
51
404
420

answered Jul 28 '15 at 17:42

cmcculloh

43,791
36
94
126

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. – MikeTeeVee Jul 20 '16 at 06:16

score 7 · Answer 3 · answered Jun 02 '16 at 21:14

7

You could use this source for better results:

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

answered Jun 02 '16 at 21:14

dr. Neox

371
3
6

4

`word-wrap: break-word;` may better – jk2K Mar 12 '18 at 16:57

Nate · Answer 4 · 2017-04-03T15:24:43.723

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

This suit better for me. Coz I dont want to effect my whole system but only on particular case — Coisox, Aug 08 '20 at 09:12

Displaying long text in Bootstrap tooltip

4 Answers4

Linked