How do you change the width and height of Twitter Bootstrap's tooltips?

Solution 1:

Just override bootstrap.css

The default value in BS2 is max-width:200px; So you can increase it with whatever fits your needs.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

Solution 2:

On BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

Solution 3:

I realize this is a very old question, but if I landed here, so will others. So I figured I weigh in.

If you want the tooltip to be responsive to one line only regardless of how much content you add to it, the width has to be flexible. However, Bootstrap does initiate the tooltip to a width, so you have to at least declare what that width will be and make it flexible from that size on up. This is what I recommend:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

The min-width declares a starting size. As opposed to the max-width, as some other would suggest, which it declares a stopping width. According to your question, you shouldn't declare a final width or your tooltip content will eventually wrap at that point. Instead, you use an infinite width or flexible width. max-width: 100%; will ensure that once the tooltip has initiated at 100px wide, it will grow and adjust to your content regardless of the amount of content you have in it.

KEEP IN MIND Tooltips are not intended to carry a lot of content. It could look funky if you had a long string across the entire screen. And it will definitely will have an impact in your responsive views, specially smartphone (320px width).

I would recommend two solutions to perfect this:

1. Keep your tooltip content to a minimum so as to not exceed 320px wide. And even if you do this you must remember if you have the tooltip placed at the right of the screen and with data-placement:right, your tooltip content will not be visible in smartphones (hence why bootstrap initially designed them to be responsive to its content and allow it to wrap)
2. If you are hellbent on using this one line tooltip concept, then cover your six by using a @media query to reset your tooltip to fit the smartphone view. Like this:

My demo HERE demonstrates the flexibility and responsiveness on the tooltips according to content size and device display size as well

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

Solution 4:

Define the max-width with "important!" and use data-container="body"

CSS file

.tooltip-inner {
    max-width: 500px !important;
}

HTML tag

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

JS script

$('.tooltiplink').tooltip();

Solution 5:

You should overwrite the properties using your own css. like so:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

the selector choose the div that the tooltip is held (tooltip is added in by javascript and it usually does not belong to any container.