javascript - マウスがホバー ターゲットに入った場所にポップオーバーを表示するにはどうすればよいですか?

Question

これは、ボタンの下にポップオーバー ウィンドウを表示するサンプル コードです。

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''

ここで、カーソルが移動する場所 (上/下/左/右だけでなく、ユーザーがカーソルを置いた場所に依存する特定の場所) にポップオーバー ウィンドウを表示する必要があります。

入手方法は？

Answer 1

bootstrap-tooltip.js で、(72 行目あたり) を置き換えます。

     , enter: function (e) {

と

     , enter: function (e) {
       var mousePos = { x: -1, y: -1 };
       mousePos.x = e.pageX;
       mousePos.y = e.pageY;
       window.mousePos = mousePos;

そして置き換えます（144行目あたり）

      case 'right':
            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
            break

と

      case 'right':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
        break
      case 'mouse':
        tp = {top: window.mousePos.y, left: window.mousePos.x}
        break

次に、次のようにポップオーバーを呼び出します。

$('.pop').popover({'placement': 'mouse'});

これは（コアファイルをハッキングする）手っ取り早い方法ですが、うまくいきます。おそらく、他の誰かがより良い方法を持っているでしょう。ポップオーバー ポインターは表示されないため、多少の作業が必要になることに注意してください。

この例は Bootstrap 2.0.3 でテストされましたが、コードは 2.2.2 でも同様に見えます。

Answer 2

ブートストラップ 3.xx の場合

1. 属性atMouse:falseをインライン クラス Tooltip.DEFAULTS{} に追加します。

   Tooltip.DEFAULTS = {
    animation: true,
    placement: 'top',
    selector: false,
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    container: false,
    atMouse: false,
    viewport: {
      selector: 'body',
      padding: 0
    }
   }
   

2. メソッド「Tooltip.prototype.enter」内の 1368 行に移動し、次のコードを変更します。

   if (obj instanceof $.Event) {
     self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
   }
   

   に：

   if (obj instanceof $.Event) {
     self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
     self.options.mousePos = {posX: obj['pageX'], posY: obj['pageY']}
   }
   

3. メソッド「Tooltip.prototype.show」内に次のコードを追加します。

   if(this.options.atMouse) {
     pos['posY'] = this.options.mousePos['posY'];
     pos['posX'] = this.options.mousePos['posX'];
   }
   

   このコード行の前に:

   var calculatedOffset = this.getCalculatedOffset(placement, pos,
           actualWidth, actualHeight)
   

4. 次のコードの Tooltip.prototype.getCalculatedOffset メソッドの本体の先頭に追加します。

   if(this.options.atMouse) {
     return placement == 'bottom' ? {top: pos.top + pos.height, left: pos.posX - (actualWidth / 2)} :
     placement == 'top' ? {top: pos.top - actualHeight, left: pos.posX - (actualWidth / 2)} :
     placement == 'left' ? {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX - actualWidth} :
     {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX}
   }
   

5. ツールチップ/ポップオーバーを次のように呼び出します。

   $("[data-toggle='popover']").popover({
       html: true,
       container: 'body',
       atMouse: true,
       trigger: 'hover',
       animation: false,
       placement: "top auto"
     });
   

私のために働いてください。