动态定位引导工具提示（用于动态地生成的元素）(Dynamically position Bootst

我使用Twitter的引导（http://twitter.github.com/bootstrap/javascript.html#tooltips）提供的工具提示。

我有我的DOM一些动态插入标记这需要触发提示。这就是为什么我触发以下方式提示（https://github.com/twitter/bootstrap/issues/4215）：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])'
});

为了避免工具提示被放置得太靠近屏幕的边缘，我需要能够基于其中触发工具提示的元件被定位成动态地设置它们的位置。我以为这样做以下方式：

   $('body').tooltip({
        delay: { show: 300, hide: 0 },
        // here comes the problem...
        placement: positionTooltip(this),
        selector: '[rel=tooltip]:not([disabled])'
    });



function positionTooltip(currentElement) {
     var position = $(currentElement).position();

     if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

     return "top";
}

如何传递currentElement正确的positionTooltip功能，以返回适当的位置值，每个提示？

提前致谢

Answer 1:

引导调用使用参数的配置功能，其中包括元

this.options.placement.call(this, $tip[0], this.$element[0])

所以你的情况，这样做：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(tip, element) { //$this is implicit
        var position = $(element).position();
        if (position.left > 515) {
            return "left";
        }
        if (position.left < 515) {
            return "right";
        }
        if (position.top < 110){
            return "bottom";
        }
        return "top";
    },
    selector: '[rel=tooltip]:not([disabled])'
});

Answer 2:

该placement在文档选项允许功能。它不记录（即我能找到）在函数哪些参数。这是很容易通过登录然而确定arguments来安慰。

这里是您可以使用的：

$('body').tooltip({

   placement: function(tip, el){
     var position = $(el).position();
      /* code to return value*/

  }

/* other options*/
})

Answer 3:

这是我怎么把我的提示在引导2.3.2

placement: function (tooltip, trigger) {
    window.setTimeout(function () {
        $(tooltip)
            .addClass('top')
            .css({top: -24, left: 138.5})
            .find('.tooltip-arrow').css({left: '64%'});

        $(tooltip).addClass('in');
    }, 0);
}

基本上我想说的是，我的提示将被定位在与一些自定义的偏移量，也是小三角形底部箭头顶部将略有是正确的。

在年底，我加入in类，它显示工具提示。

另外请注意，该代码被包裹在setTimeout 0功能。

Answer 4:

这是速记，我使用，以确定窗宽度较小768与否，然后改变工具提示放置从左顶部：

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}

Answer 5:

这个工作对我来说

$("[rel=tooltip]").popover({
            placement: function(a, element) {
               var position = $(element).parent().position();
               console.log($(element).parent().parent().is('th:first-child'));

                if ($(element).parent().parent().is('th:last-child')) {
                    return "left";
                }
                if ($(element).parent().parent().is('th:first-child')) {
                    return "right";
                }
                return "bottom";
            },

        });