12

In my AngualrJS application we use angular-ui-bootstrap tooltips.

I have one tooltip that needs to accommodate long text. The answer to SO question Displaying long text in Bootstrap tooltip shows me how to make tooltips go wider...

... but what if I don't want to make all tooltips wider, just one specific tooltip?

(Notes: AngularJS 1.2.24, jQuery available... but I'd rather just be able to apply a style to that single tooltip than get more complicated)

Community
  • 1
  • 1
Daryn
  • 4,791
  • 4
  • 39
  • 52

2 Answers2

12

If on the other hand you have tooltip-append-to-body="true", you can use the following modified version of @Daryn's code

CSS

.tooltip-400max .tooltip-inner {
  max-width: 400px;
}

HTML

<div id="element1"
  tooltip-append-to-body="true"
  tooltip-class="tooltip-400max"
  tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
TMG
  • 2,620
  • 1
  • 17
  • 40
  • 1
    This is now a better answer than my original, due to introduction of `tooltip-class` available in angular-ui v0.13.0 in summer 2015 – Daryn Mar 07 '16 at 20:49
  • 2
    This works for `popover` as well; just use `popover-class`. – theblang Mar 27 '16 at 22:16
10

As long as you don't have tooltip-append-to-body="true", you can use the following CSS (in this example, making the tooltip max width 400px):

CSS

.tooltip-400max + .tooltip .tooltip-inner {
  max-width: 400px;
}

HTML

<div id="element1"
     class="tooltip-400max"
     tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>

The key in the CSS above is the adjacent sibling selector, +.

That's because, as you probably know, when you hover over element1, the tooltip is inserted as a div after element1, approximately like this:

<div id="element1"
     class="tooltip-400max"
     tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>

Thus the CSS selector .tooltip-400max + .tooltip will select only this inserted tooltip, which is an adjacent sibiling. The descendant .tooltip-inner max-width styling will not affect all tooltips, only tooltips for elements with tooltip-400max class.

Daryn
  • 4,791
  • 4
  • 39
  • 52
  • 3
    @das what property did you adjust, `width` or `max-width`? BTW To debug your styling, I like to temporarily add `tooltip-trigger="click"` to the element so the tooltip will stay visible, allowing me to try different styles in the browser developer tools. – Daryn Feb 23 '15 at 19:21
  • Another quick option for debugging is right clicking on the tooltip and then clicking on the developer console (works in Chrome anyway) – nardnob Jan 12 '16 at 13:55
  • I've changed the accepted answer to @TMG. As TMG points out, `tooltip-class` is now available (introduced in v0.13.0 last summer) and that's a way clearer way to apply the styling. This answer still applies for anyone using ui-boostrap v0.12 or lower. – Daryn Feb 19 '16 at 20:11