-1

ウィンドウのサイズ変更時にトリガー要素から浮き上がらないように、ブートストラップ ポップオーバーをどのように配置しますか?

ヒントをポップオーバーの上端、つまり角の近くに移動するには、どの css を適用する必要がありますか?

次のオプションを設定していますが、ポップオーバーを右ではなく左に配置します。

$(function () {
  $('.js-tooltip-trigger').popover({
    html: true,
    trigger: 'focus',
    placement: 'auto right',
    content: function (e) {
        return $(this).parent(".form-group").find(".js-tooltip").html();
    }
  }).on('shown.bs.popover', function () {
       $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
     });
});

html:

<div class="form-group">
<label for="ref">Reference</label>

<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >  

<div class="js-tooltip" style="display: none;">
    <p><strong>Your reference is optional.</strong></p>
    <p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
4

1 に答える 1

2

私はこれがどのように機能するかのファンではありませんが、基本的には、 popover が必要な位置にとどまる要素を作成し、それに popover を追加する必要があります。この場合、ツールチップ html 用に既に配置されているコンテナーを使用しました。コンテナー ID を動的に作成しているので、html でそれを行うことを心配する必要はありません。

したがって、この HTML の場合:

<div class="form-group pos-relative">
    <label for="ref">Reference</label>
    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
    <span class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
    </span>
</div>

この CSS:

.pos-relative{
  position:relative;
}
.js-tooltip{
   position:absolute; 
   top:0;
   right:0;
}

そして、この JS は、次の場所で実行されます。

$(function () {

  $('.js-tooltip-trigger').each(function(ind, ele){

    var $ele = $(ele),
        $ttSpan = $ele.next('.js-tooltip'),
        ttHtml = $ttSpan.html(),
        rndID = 'ttid'+ String(Math.random()).substr(2);

    // set the ID, strip the style, and empty the html--
    // we already have it stored in the var above
    $ttSpan.attr('id', rndID).removeAttr('style').html('');

    // make the popovers
    $ele.popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        container: '#'+rndID, 
        content: ttHtml
    });

  });

});

実際の動作はこちら

于 2015-05-28T14:29:36.920 に答える