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

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

This will work for bootstrap 4v

The class names have changed quite dramatically:

• .bs-tooltip-bottom
• .bs-tooltip-top
• .bs-tooltip-right
• .bs-tooltip-left

example:

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

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