Làm thế nào để làm cho cửa sổ bật lên xuất hiện khi con chuột của tôi nhập vào mục tiêu di chuột?

Question

Đây là một ví dụ mã để hiển thị màn hình hiển thị cửa sổ popover bên dưới nút của tôi:

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

Bây giờ tôi muốn cửa sổ popover xuất hiện trên nơi mà con trỏ di chuyển của tôi trên (không chỉ trên/dưới/trái/phải, nhưng một vị trí cụ thể phụ thuộc vào nơi người dùng đặt con trỏ của họ lên).

Làm cách nào để tải xuống?

Answer 1

Trong bootstrap-tooltip.js, thay thế (khoảng dòng 72)

 , enter: function (e) { 

với

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

và thay thế (khoảng dòng 144)

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

với

 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 

.210

Sau đó gọi popover của bạn như thế này:

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

Đây là một cách nhanh chóng-n-bẩn để đi về nó (hack file core), nhưng nó hoạt động. Có lẽ một người khác có một phương pháp đẹp hơn. Lưu ý rằng con trỏ popover sẽ cần một số công việc vì nó không xuất hiện.

Ví dụ này đã được thử nghiệm trong Bootstrap 2.0.3, nhưng mã xuất hiện tương tự trong 2.2.2.

Answer 2

Đối bootstrap 3.x.x

1.Add thuộc tính atMouse: false đến Tooltip.DEFAULTS lớp inline {}.

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.Go vào dòng 1368 bên trong của phương pháp "Tooltip.prototype.enter" và thay đổi đoạn mã sau:

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

tới:

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

3.Inside của phương thức "Tooltip.prototype.show" thêm mã sau:

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

trước dòng mã này:

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

4.Prepend cho cơ thể của phương pháp Tooltip.prototype.getCalculatedOffset mã sau:

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 tooltip/popover một cái gì đó như thế này:

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

Làm việc cho tôi.