动态定位Bootstrap工具提示（用于动态生成的元素）
我正在使用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函数，以便为每个工具提示返回适当的放置值？
提前致谢
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])' });
docs中的placement选项允许函数。 它没有记录（我可以找到）函数中的参数。 但是，通过将arguments记录到控制台，很容易确定。
这是你可以使用的：
$('body').tooltip({ placement: function(tip, el){ var position = $(el).position(); /* code to return value*/ } /* other options*/ })
这就是我将工具提示放在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); }
基本上我在这里说的是我的工具提示将位于顶部，带有一些自定义偏移，底部的小三角箭头也会略微向右。
最后我添加了显示工具提示的课堂内容。
另请注意，代码包含在setTimeout 0函数中。
这是我用来确定窗口宽度是否小于768的简写，然后从左到右更改工具提示位置：
placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
这个对我有用
$("[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"; }, });
如果将选项container设置为工具提示， $(element).position()将无法正常工作。
在我的例子中，我使用container : 'body'而不得不使用$(element).offset() 。