How do I style just one specific angular-ui-bootstrap tooltip to be wider?

Question

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)

Answer 1

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>

Answer 2

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.