How do you change the width and height of Twitter

Question

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?

Answer 1

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.

Answer 2

BS3:

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

Answer 3

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).

Answer 4

Try this code,

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

Answer 5

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%;
}

Answer 6

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 */ 
}