Вертикальное смещение для всплывающих подсказок twitter bootstrap

У меня есть несколько элементов, динамически добавленных на страницу с подсказками twitter-bootstrap, назначенными каждому. Однако эти динамически добавляемые объекты имеют некоторые смещения по вертикали, что препятствует точному выравниванию всплывающих подсказок (их необходимо сдвинуть вниз примерно на 15 пикселей). Тогда мой вопрос: как мне переместить каждую всплывающую подсказку (как те, которые в настоящее время привязаны, так и те, которые не привязаны) на 15 пикселей ниже их текущих позиций при их рендеринге?

Следующее заботится о смещении, если всплывающая подсказка в настоящее время отображается, но не работает проактивно (будущие всплывающие подсказки отображаются без смещения):

$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px')

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


javascript twitter-bootstrap
person astex    schedule 01.04.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как активируются ваши всплывающие подсказки? Если вы используете «зависание» по умолчанию, вы можете назначить функцию, когда ваш элемент зависает, а затем изменить положение элемента .tooltip с помощью .css следующим образом:

$("[data-toggle=tooltip]").tooltip();
$("[data-toggle=tooltip]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px')
});

Работа с Bootply: http://bootply.com/59977

Возможно, вам придется изменить $("[data-toggle=tooltip]") на любой селектор, который вы используете для своих всплывающих подсказок.

person Zim    schedule 25.04.2013
comment
я использую опцию «показать». всплывающее окно всегда появляется на экране. В этом случае я могу изменить верхнюю позицию всплывающего окна. - person nani1216; 12.12.2014
comment
ПРИМЕЧАНИЕ: если вы добавите 15px от верхней части всплывающей подсказки при наведении, как это было предложено, это будет происходить при КАЖДОМ наведении, и всплывающая подсказка будет постепенно ползти вниз по экрану. - person John R; 31.03.2015

arrow_upward
0
arrow_downward

Мы должны добавить обратный вызов «handlerOut», чтобы компенсировать смещение, иначе всплывающая подсказка снова добавит смещение, прежде чем исчезнуть:

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').hover(function(){
        $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 20 + 'px')            
    },
    function () {
        $('.tooltip').css('top', parseInt($('.tooltip').css('top')))
    });
person Mario Lopez    schedule 19.08.2016