Twitter Bootstrap - как добавить дополнительный запас между всплывающим окном всплывающего окна и элементом

Я ничего не пробовал, так как я не могу понять, где пространство между подсказкой и элементом создается/добавляется из начальной загрузки, обычно подсказка действительно находится рядом с элементом, который запускает событие всплывающей подсказки.

Я просто хотел бы открыть всплывающую подсказку немного от элемента, чтобы добавить еще несколько полей из всплывающей подсказки и элемента, которые я имею в виду.

Я хотел бы понять, как это сделать в css, если это возможно, и если возможно сделать это как для правых, так и для левых, верхних, нижних всплывающих подсказок

Вопрос надежды ясен.

Вот как всплывающие подсказки просматривают мое приложение:

и это то, что я хотел бы сделать, и как они должны выглядеть

Ответ 1

Это CSS по умолчанию для всплывающей подсказки сверху:

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

Вы можете переопределить его в своем собственном CSS:

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

Обратите внимание, что этот код будет работать только над всплывающей подсказкой, вы не сможете адаптировать CSS для трех других ориентаций:

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

Ответ 2

Это будет работать для начальной загрузки 4v

Имена классов изменились довольно резко:

.bs-подсказка дно
.bs-подсказка-топ
.bs-подсказка правой
.bs-подсказка левая

пример:

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

Ответ 3

В bootstrap.css вы найдете этот код:

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

Измените или переопределите поля, чтобы изменить расстояние всплывающей подсказки от зависающих элементов.

т.е. Чтобы установить большее расстояние для верхнего положения всплывающей подсказки, установите класс .tooltip.top следующим образом:

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

Ответ 4

Вот полное решение Bootstrap 4

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

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

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

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