martes, 22 de octubre de 2013

Bootstrap full width tooltip

I was trying to make full width of tooltip because when you have a small button and long tooltip it looks like a column and is a bit ugly :).

So, go to bootstrap.css and find ".tooltip" then just add "white-space: nowrap;". With this line we are saying that the text will never wrap to the next line.

This is a original .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}

This is a final .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
white-space: nowrap;
}

Publicar un comentario