3

これは私の前の質問へのフォローアップです。

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

前もって感謝します。

4

2 に答える 2

5

論理的には不可能です :) 考えてみてください。ツールチップは配置関数を呼び出してその位置を取得し、ページにチップを挿入してスタイルを設定します。

ただし、近日公開予定のヒントと同じ機能を備えたダミー ヒントを作成して、幅を確保することができます。このような ：

$('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])'
});
于 2012-11-23T14:06:57.730 に答える
0

使用できます：

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

ツールチップ div と同じ高さと幅の正確な div を取得します。

于 2016-12-27T06:03:19.817 に答える