javascript – 获取工具提示的宽度并计算位置(Twitter Bootstrap)

2019-09-01 14:37:07 阅读：206 来源： 互联网

标签：javascript jquery twitter-bootstrap tooltip

我需要动态地放置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';
        }
    }
});

提前致谢.

解决方法:

从逻辑的角度来看,这是不可能的:)想一想 – 工具提示调用放置函数来获取它的位置,然后它将提示插入页面并设置样式.

但是,您可以创建一个与即将到来的尖端具有相同功能的虚拟尖端,并通过它获得宽度.像这样：

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

标签：javascript,jquery,twitter-bootstrap,tooltip
来源： https://codeday.me/bug/20190901/1783965.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 获取工具提示的宽度并计算位置(Twitter Bootstrap)