Вспомогательная подсказка Bootstrap в неправильном положении при начальном наведении, затем в правильном положении

Question

Я использую всплывающие подсказки из twitter bootstrap на div на веб-странице. Всплывающая подсказка инициализируется, но при первом зависании она находится в неправильном положении; однако при последующих поворотах всплывающая подсказка находится в правильном положении.

Я думаю, что проблема возникает из-за того, что div, к которому прикреплена всплывающая подсказка, абсолютно позиционируется.

Вот DIV тег в моем HTML:

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> 

Это как отображается подсказка на первом парении:

А вот как он отображается на каждом зависании после этого :

(размеры не изменяются только размер экрана растениеводство)

стили, применяемые к DIV являются:

#sample-menu { 
    position: absolute; 
    top: 95px; 
    right: 608px; 
} 

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

** Я добавил еще несколько подсказок на divs, которые не были абсолютно расположены, и у меня такая же проблема (первое появление всплывающей подсказки удалено из моего элемента, а затем после первого появления оно правильно). У меня есть svg на странице с элементами, которые добавляются и размером с javascript (d3). Похоже, мне нужно вызвать что-то, чтобы изменить положение всплывающих подсказок после того, как все элементы страницы добавлены/размер, однако ни один из решений Bootstrap Tooltip или Tether для репозиционирования не работал для меня.

Answer 1

Вот codepen of the original problem

Я сделал положение тела «родственник», так что мои дочерние элементы могут быть расположены абсолютно так, как я хотел, и я также установил маржу организма «0 auto 'для центра содержимого. Эти стили мешали решению опции контейнера для подсказок, которое Эрик упомянул в своем ответе.

/*original css*/ 
body { 
    position: relative; 
    width: 980px; 

    /*set as important to work in codepen example*/ 
    margin:0 auto !important; 
} 

#sample-menu{ 
    position: absolute; 
    top: 109px; 
    left: 600px; 
} 

//js that didn't solve tooptip positioning issue 
$(function(){ 
    $('[data-toggle="tooltip"]').tooltip({ 
    container: 'body' 
    }); 
}); 

Плохая практика заключалась в том, что этот стиль применяется к телу в первую очередь. Вот codepen that solves this problem и по-прежнему дает мне внешний вид и поведение, которые я хочу без проблем всплывающих подсказок. Я добавил контейнер вокруг содержимого, чтобы применить стили, а затем появилось подсказку «контейнер: тело», предложенное Эриком Г.

/*new css with styling on a container div instead of the body*/ 
.container { 
    position: relative; 
    width: 980px; 
    margin:0 auto; 
} 

#sample-menu{ 
    position: absolute; 
    top: 109px; 
    left: 600px; 
} 

//js now fixes the tooltip positioning issue 
$(function(){ 
    $('[data-toggle="tooltip"]').tooltip({ 
    container: 'body' 
    }); 
}); 

Answer 2

Ниже работал для меня в прошлом для подсказок, связанных с абсолютным позиционированием:

$('[data-toggle="tooltip"]').tooltip({ 
    container: 'body' 
}); 

Я просто запустить этот сценарий после того, как все сделано рендеринга на странице и все настроено нормально. Также в областях, где есть обновление для подсказки инструмента, я должен запустить это снова.