I have an HTML page with a lot of links with tooltips using Bootstrap's tooltip plugin. I have found the following CSS to change the width of the tooltips:

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

Although this works, it changes ALL of my tooltips to this width. What if I want to change just one? I tried this, but it did not work correctly:

<style rel="stylesheet" type="text/css">    
#my_tooltip .tooltip-inner { max-width: 350px; }
</style>

<a id="my_tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip content">This is a tooltip</a>

I have an HTML page with a lot of links with tooltips using Bootstrap's tooltip plugin. I have found the following CSS to change the width of the tooltips:

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

Although this works, it changes ALL of my tooltips to this width. What if I want to change just one? I tried this, but it did not work correctly:

<style rel="stylesheet" type="text/css">    
#my_tooltip .tooltip-inner { max-width: 350px; }
</style>

<a id="my_tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip content">This is a tooltip</a>

• javascript
• html
• css
• twitter-bootstrap
• tooltip

• give the tooltip an extra class then amend your css for that tooltip only – Andrew Matthew Commented May 28, 2014 at 14:44
• 1 @AndrewMatthew could you expound on that a little more? I am confused by what you mean. Maybe try making an official reply to my question. – Tigerman55 Commented May 28, 2014 at 14:48

2 Answers 2

Probably best to do it via jquery. But css will work too:

#my_tooltip + .tooltip .tooltip-inner { width: 350px; }

and here is the js:

$(function () {
$('#my_tooltip').tooltip().on("mouseenter", function () {
    var $this = $(this),
    tooltip = $this.next(".tooltip");
    tooltip.find(".tooltip-inner").css({
        width: "350px",
    });
 });
});

The following solution worked for me

    $(yourselectorname).on('inserted.bs.tooltip', function () {
    $("body div.tooltip-inner").css("max-width", "500px");
    });