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

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

Answer 1

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

Answer 2

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.

Answer 3

Try this code,

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