簡體   English   中英

twitter bootstrap工具提示的垂直偏移量

[英]Vertical offset for twitter bootstrap tooltips

我有幾個元素動態添加到頁面,每個元素都分配了twitter-bootstrap工具提示。 但是,這些動態添加的對象具有一些垂直偏移,這可以防止工具提示准確排列(它們需要減少大約15px)。 那么我的問題是,如何重新定位每個工具提示(當前綁定的那些工具提示和那些不工作提示的工具提示)在渲染時比當前位置低15px?

如果當前正在顯示工具提示,則以下處理偏移,但不會主動工作(將顯示未來偏移的未來工具提示):

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

我不知道將此綁定到哪種事件以便將其應用於任何曾經放在屏幕上的工具提示。

你的工具提示是如何被激活的? 如果您正在使用默認的“懸停”,則可以在元素懸停時分配函數,然后使用.css重新定位.tooltip元素,如下所示:

$("[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]")更改為您用於工具提示的任何選擇器。

我們必須添加'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')))
    });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM