获取工具提示的宽度并计算其位置（Twitter Bootstrap）

Question

这是我对之前问题的跟进。

我需要动态地放置Bootstrap工具提示。为了做到这点，我需要知道触发工具提示的元素的位置（已经可以了），以及工具提示应该出现的宽度：

为了澄清，我的工具提示是动态生成的，然后插入内容中。如果它们太靠近屏幕左侧边缘，我需要将它们放在“右侧”而不是“顶部”。现在，我想获取工具提示的宽度，只有当它实际上要超出屏幕时才将它放在“右侧”。

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])',
    placement: function(tip, element) {
        var offsetLeft = $(element).offset().left;
        var offsetRight = ( $(window).width() - ( offsetLeft + $(element).outerWidth() ) );

        // need help here: how to get the width of the current tooltip?
        // currently returns "0" for all elements
        var tooltipWidth = $(tip).outerWidth();
        console.log(tooltipWidth);

        if (offsetLeft < 220) {
            return 'right';
        }
        if (offsetRight < 220) {
            return 'left';
        }
        else {
            return 'top';
        }
    }
});

谢谢您的提前帮助。

- maze

---

为什么在Bootstrap自动放置元素的情况下，您需要动态地放置它们？ - itsme

如果您需要更改某些工具提示的位置，请直接使用CSS，新建类和新的CSS规则，也许我没有完全理解您真正需要的内容。 - itsme

我的工具提示是动态生成的，然后插入到内容中。如果它们例如太靠近屏幕左边缘，我需要将它们放置在“右侧”而不是“顶部”。现在我想获取工具提示的宽度，只有当它实际上超出屏幕时才将其放置在“右侧”。 - maze

Answer 1

从逻辑上讲，这是不可能的 :) 想想看 - 工具提示调用放置函数以获取其位置，然后将提示插入页面并进行样式设置。

但是，您可以创建一个与即将出现的工具提示具有相同功能的虚拟提示，并通过此方式获取宽度。像这样:

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(a, element) {

        //title is by tooltip moved to data-original-title
        var title=$(element).attr('data-original-title');

        //create dummy, a div with the same features as the tooltïp
        var dummy=$('<div class="tooltip">'+title+'</div>').appendTo('body');
        var width=$(dummy).width();
        dummy.remove();

        //now you have width 
        //..
        //..

        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])'
});

- davidkonrad

---

好的，那很有道理。与此同时，我选择了另一种方法来定位我的工具提示。但是我想今天早上在得到你的帮助后我可以实现我想要的效果 :) 再次感谢。 - maze

Answer 2

你可以使用：

  var dummy = $('<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + title + '</div></div>').appendTo('body');

为了获得与工具提示div相同的高度和宽度的确切div。

- Arjun