Twitter Bootstrap - how to add some more margin between tooltip popup and element

Question

I have not tried anything since I can't understand where space between tooltip and element is made/added from bootstrap, normally tooltip is really near the element who triggers the tooltip event.

I just would like to make the tooltip opening little bit away from the element, to add some more margin from tooltip and element I mean.

I would like to understand how to do this in css if possible and if is possible to make it both for right, left, top, bottom tooltips.

Hope question is clear.

This is how tooltips looks on my app:

and this is what I would like to do and how it should look afterwards:

Answer 1

This is the default CSS for a tooltip on top :

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

You can override it in your own CSS :

.tooltip.top {
  margin-top: -10px;
}

Note this code will only work work a tooltip on top, you'll nedd to adapt the CSS for the 3 other orientations :

.tooltip.top    { margin-top: -10px; }
.tooltip.right  { margin-left: 10px; }
.tooltip.bottom { margin-top: 10px;   }
.tooltip.left   { margin-left: -10px; }

Answer 2

Here is the complete Bootstrap 4 solution

.bs-tooltip-top {
    top: -10px !important;
}

.bs-tooltip-right {
    left: 10px !important;
}

.bs-tooltip-bottom {
    top: 10px !important;
}

.bs-tooltip-left {
    left: -10px !important;
}