17

twitter ブートストラップで作成したツールチップやポップオーバーを操作したい。私の知る限り、これを行うためのビルドはありません。

$('#selector').popover({
  placement: 'bottom'
});

たとえば、作成されたツールチップを計算された場所から 5 ピクセル上に移動し、5 ピクセル左に移動したいとします。これを行うための最良の方法に関するアイデアはありますか?

これは私がやりたいことです：

$('#selector').popover({
  placement: 'bottom',
  callback: function(){
    alert('Awesome');
  }
});
4

4 に答える 4

26

ツールチップで動作します:

var tmp = $.fn.tooltip.Constructor.prototype.show;
$.fn.tooltip.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

this.$('#selector').tooltip({ 
  placement: 'top', 
  callback: function() { 
    alert('hello') 
  } 
});
于 2013-02-06T10:51:17.467 に答える
14

以前の回答が提供されたときにはこれは利用できなかったかもしれませんが、2016年現在、イベントをポップオーバーにアタッチできます（機能的にはコールバックと同等です）。

例えば

$('#myPopover').on('shown.bs.popover', function () {
  // do something…
})

イベントは次のとおりです。

  • show.bs.popover
  • shown.bs.popover
  • hide.bs.popover
  • hidden.bs.popover
  • 挿入された.bs.popover

参照ブートストラップ ドキュメント

于 2016-02-11T07:04:42.307 に答える
5

この回答は、クラフターが要求したことを明確にするために投稿されたもので、マルケスのコメントからのコードが含まれています。

まず、Bootstrap のポップオーバーを拡張してcallbackオプションを処理します。

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    tmp.call(this); if (this.options.callback) {
        this.options.callback();
    }
}

次にcallback、オプション オブジェクトにプロパティを追加し、無名関数を割り当てます。

$('#popover-foo').popover({
    content: 'Hello world',
    callback: function () {
        alert('Hello');
    }
});
于 2015-03-27T16:05:35.347 に答える
2

その他の回避策:

  1. show.bs.popover または shown.bs.popover リスナーを使用する

  2. コールバックでは、「表示された」イベント データが、ポップオーバー ID を保持するターゲットにリンクされます。ここから残りの作業を行うことができます。

    $('body')
.popover(options)
.on('shown.bs.popover', function(shownEvent) {
        update_popover_data(shownEvent);
});

コールバック関数:

    function update_popover_data(shownEvent) {
         var id = $(shownEvent.target).attr('aria-describedby');
         $('#'+id).html('Your New Popover Content');
    }
于 2016-12-01T10:56:51.107 に答える