如何让popover出现在我的鼠标进入悬停目标？ [英] How to make popover appear where my mouse enters the hover target?

问题描述

这是一个示例代码，显示弹出窗口显示在我的按钮下面：

  $。fn.popover.defaults = $ .extend（{}，$ .fn.tooltip.defaults，{
 placement：'bottom'，content：''
  

现在我想在弹出窗口出现在我的光标移动的地方（不仅是上/下/左/右，而是一个特定的位置，这取决于用户放置他们的光标）。

如何获取？

解决方案

在bootstrap-tooltip。 js，replace（at line 72）

 ，输入：function（e）{
 
 ，请输入：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 
  
然后像这样调用popover：
  $（'。pop'）。popover（{'placement'：'mouse'}）; 
  
这是一个快速的方式去处理作品。也许别人有一个更好的方法。注意，popover指针将需要一些工作，因为它不会出现。 
 
 
 
此示例在Bootstrap 2.0.3中进行了测试，但代码在2.2.2中显示类似。 
 
This is an example code to show the popover window display below my button:
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''
Now I want the popover window appear on the place where my cursor moves on(not only top/bottom/left/right, but a specific location which depends on where user put their cursor on). 

How to get it? 
解决方案
In bootstrap-tooltip.js, replace (at about line 72)
     , enter: function (e) {
with 
     , enter: function (e) {
       var mousePos = { x: -1, y: -1 };
       mousePos.x = e.pageX;
       mousePos.y = e.pageY;
       window.mousePos = mousePos;
and replace (at about line 144)
      case 'right':
            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
            break
with 
      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
Then call your popover like this:
$('.pop').popover({'placement': 'mouse'});
This is a quick-n-dirty way to go about it (hacking core files), but it works. Perhaps someone else has a nicer method. Note that the popover pointer will need some work as it doesn't appear. 

This example was tested in Bootstrap 2.0.3, but the code appears similar in 2.2.2. 

                        
这篇关于如何让popover出现在我的鼠标进入悬停目标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！