CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Labanino
Labanino

Reputation: 3960

Positioning vertically .tooltip-inner in bootstrap

By default the arrow is aligned vertically 50% of the .tooltip-inner height or from the element to the top of the window:

enter image description here

But what I really want to do is having the arrow around 20px to the top of the .tooltip-inner class or tooltip's content:

enter image description here

I guess it can't be done with .css because the height of the tooltip content is calculated dynamically by javascript. Any help on this? Thanks. JSFIDDLE

Upvotes: 0

Views: 479

Answers (2)

maioman
maioman

Reputation: 18734

setting margin on top will also work:

.tooltip-arrow{margin-top:-13px}
.tooltip-inner{margin-top: 65px}

fiddle

no !important required

Upvotes: 2

Ryan Gill
Ryan Gill

Reputation: 1758

You can override those with css using the !important.

div.tooltip {
    top: 4px !important;    
}

div.tooltip-arrow {
    top: 15px !important;
}

Fiddle

Upvotes: 1

Related Questions