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

in bootstrap 3.0.3 you can do it by modifying the popover class

.popover {
    min-width: 200px;
    max-width: 400px;
}

Answer 2

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/

Answer 3

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.

Answer 4

Set the class to the main tooltip div and for the inner tooltip

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

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

Answer 6

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