如何让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){
$ c $ ,请输入: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屋!