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>