How do you change the width and height of Twitter Bootstrap's tooltips?
Twitter BootstrapTooltipTwitter Bootstrap Problem Overview
I created a tooltip using Twitter Bootstrap.
The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.
How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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 - Twitter Bootstrap
On BS3
.tooltip-inner {
min-width: 150px; /* the minimum width */
}
Solution 3 - Twitter Bootstrap
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:
- 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) - 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 - Twitter Bootstrap
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 - Twitter Bootstrap
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.
Solution 6 - Twitter Bootstrap
To fix the width problem, use the following code instead.
$('input[rel="txtTooltip"]').tooltip({
container: 'body'
});
example: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
Solution 7 - Twitter Bootstrap
Another solution; create a new class (e.g. tooltip-wide) in CSS:
.tooltip-wide + .tooltip > .tooltip-inner {
max-width: 100%;
}
Use this class on elements where you want wide tooltips:
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
Bootstrap tooltip generates markup below the element containing the tooltip, so the HTML actually looks something like this after the markup is generated:
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">I am a long tooltip</div>
</div>
The CSS uses this to access the adjacent element (+) to .tooltip-wide, and from there navigates to .tooltip-inner, before applying the max-width attribute. This will only affect elements using the .tooltip-wide class, all other tooltips will remain unaltered.
Solution 8 - Twitter Bootstrap
after some experimenting, this worked best for me:
.tooltip-inner {
max-width: 350px; /* set this to your maximum fitting width */
width: inherit; /* will take up least amount of space */
}
Solution 9 - Twitter Bootstrap
You may edit the .tooltip-inner css class in bootstrap.css. The default max-width is 200px. You may change the max-width to your desired size.
Solution 10 - Twitter Bootstrap
Just override the default max-width
to whatever fits your needs.
.tooltip-inner {
max-width: 350px;
}
When max-width doesn't work (option 1)
If max-width does not work, you could use a set width instead. This is fine, but your tooltips will no longer resize to fit the text. If you don't like that, skip to option 2.
.tooltip-inner {
width: 350px;
}
Correctly dealing with small containers (option 2)
Since Bootstrap appends the tooltip as a sibling of the target, it is constrained by the containing element. If the containing element is smaller than your max-width
, then max-width
won't work.
So, when max-width
doesn't work, you just need to change the container
:
<div class="some-small-element">
<a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>
Pro Tip: the container can be any selector, which is nice when you only want to override styles on a few tooltips.
Solution 11 - Twitter Bootstrap
On Bootstrap 4, and if you don't want to change all tooltips width, you can use specific template for the tooltip you want :
<a href="/link" class="btn btn-info"
data-toggle="tooltip"
data-placement="bottom"
data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
title="This is a long message displayed on 400px width tooltip !"
>
My button label
</a>
Solution 12 - Twitter Bootstrap
Set the class to the main tooltip div and for the inner tooltip
div.tooltip {
width: 270px;
}
div.tooltip-inner {
max-width: 280px;
}
Solution 13 - Twitter Bootstrap
Please refer the below post. cmcculloh's answer worked for me. https://stackoverflow.com/posts/31683500/edit
As hinted at in the documentation, the easiest way to ensure that your tooltip does not wrap at all is to use
.tooltip-inner {
max-width: none;
white-space: nowrap;
}
With this, you don't have to worry about dimension values or anything like that. Main problem being if you have a super long line of text it will just go off of the screen (as you can see in the JSBin Example).
Solution 14 - Twitter Bootstrap
BS3:
.tooltip-inner { width:400px; max-width: 400px; }
Solution 15 - Twitter Bootstrap
I needed to adjust the width of some tooltips. But not an overall setting. So I ended up doing this:
CSS
.large-tooltip .tooltip-inner {
max-width: 300px;
}
@media screen and (max-width: 300px) {
.large-tooltip .tooltip-inner {
max-width: 100%;
}
}
JQuery
$('[data-toggle="tooltip"]')
.tooltip()
.on('shown.bs.tooltip', function(e) {
/**
* If the item that triggered the event has class 'large-tooltip'
* then also add it to the currently open tooltip
*/
if ($(this).hasClass('large-tooltip')) {
$('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
}
});
Html
<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
Solution 16 - Twitter Bootstrap
Setting the max-width of class tooltip-inner didn´t work for me, I´m using bootstrap 3.2
Some how setting max-width only work if you set the width of parent class (.tooltip).
But then all tooltips become the size you specify. So here´s my solution:
add a Width to the parent class:
.tooltip {
width:400px;
}
Then you add the max-width and change the display to inline-block, so it will not occupy the entire space
.tooltip-inner {
max-width: @tooltip-max-width;
display:inline-block;
}
Solution 17 - Twitter Bootstrap
Try this code,
.tooltip-inner {
max-width:350px !important;
}
Solution 18 - Twitter Bootstrap
I had the same problem, however all popular answers - to change .tooltip-inner{width}
for my task failed to do the job right. As for other (i.e. shorter) tooltips fixed width was too big. I was lazy to write separate html templates/classes for zilions of tooltips, so I just replaced all spaces between words with
in each text line.
Solution 19 - Twitter Bootstrap
With Bootstrap 4 I use
.tooltip-inner {
margin-left: 50%;
max-width: 50%;
width: 50%;
min-width: 300px;
}
Solution 20 - Twitter Bootstrap
Mine where all variable lengths and a set max width would not work for me so setting my css to 100% worked like a charm.
.tooltip-inner {
max-width: 100%;
}
Solution 21 - Twitter Bootstrap
in bootstrap 3.0.3 you can do it by modifying the popover class
.popover {
min-width: 200px;
max-width: 400px;
}