23

我正在使用 Twitter Bootstrap (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 函数，以便为每个工具提示返回适当的放置值？

提前致谢

4

6 回答 6

35

Bootstrap 使用包含元素的参数调用放置函数

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])'
});
于 2012-11-22T15:49:46.917 回答
6

这就是我在Bootstrap 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函数中。

于 2013-09-27T10:27:03.083 回答
5

文档中的placement选项允许 function 。没有记录（我可以找到）函数中有哪些参数。这很容易通过登录arguments到控制台来确定。

这是您可以使用的：

$('body').tooltip({

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

  }

/* other options*/
})
于 2012-11-22T15:48:35.603 回答
1

这是我用来确定窗口宽度是否小于 768 的简写，然后从左到上更改工具提示位置：

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
于 2017-03-04T19:30:23.280 回答
0

这个对我有用

$("[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";
            },

        });
于 2013-05-06T14:17:59.690 回答
0

$(element).position()container如果选项设置为工具提示，将无法正常工作。

就我而言，我使用container : 'body'并且必须使用$(element).offset()。

于 2013-11-14T12:15:38.117 回答