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

Question

i have not tryed 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 trigge

Answer 1

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

Answer 2

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 3

In bootstrap.css you will find this code:

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

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

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

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

Change or override margins to change distance of tooltip from hovered elements.

I.E. To set bigger distance for top position of tooltip, set .tooltip.top class like this:

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

Answer 4

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