这是一个示例代码来显示低于我按钮酥料饼的窗口显示:
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''
现在我想的酥料饼的窗口出现在地方,我的光标移动上(不仅是上/下/左/右,而是取决于其中用户把他们的光标放在特定的位置)。
如何获得呢?
这是一个示例代码来显示低于我按钮酥料饼的窗口显示:
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''
现在我想的酥料饼的窗口出现在地方,我的光标移动上(不仅是上/下/左/右,而是取决于其中用户把他们的光标放在特定的位置)。
如何获得呢?
在自举-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'});
这是一个快速正肮脏的方式去了解它(黑客核心文件),但它的作品。 也许别人有一个更好的方法。 需要注意的是酥料饼的指针将需要一些工作,因为它不会出现。
本实施例中在自举2.0.3测试,但代码出现在2.2.2类似。
对于引导的3.xx
1.增加属性atMouse:假的内嵌类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']}
}
方法“Tooltip.prototype.show”添加以下代码的3.Inside:
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.Prepend到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.Call提示/酥料饼是这样的:
$("[data-toggle='popover']").popover({
html: true,
container: 'body',
atMouse: true,
trigger: 'hover',
animation: false,
placement: "top auto"
});
为我工作。