Làm cách nào để giữ các cửa sổ bật lên Bootstrap vẫn tồn tại khi được di chuột?

114

Tôi đang sử dụng cửa sổ bật lên Bootstrap để tạo thẻ di chuột hiển thị thông tin người dùng và tôi đang kích hoạt nó khi di chuột qua một nút. Tôi muốn giữ cho cửa sổ bật lên này tồn tại trong khi bản thân cửa sổ bật lên đó đang được di chuột qua, nhưng nó sẽ biến mất ngay sau khi người dùng ngừng di chuột qua nút. Tôi có thể làm cái này như thế nào?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

Mở rộng đoạn mã

jquery twitter-bootstrap popper.js

— vikas devde
nguồn

bạn muốn giữ những gì còn sống? tôi di chuột qua nút và nó vẫn mở?

— David Chase

đọc dòng câu hỏi cuối cùng

— vikas devde

172

Kiểm tra với đoạn mã bên dưới:

Sửa đổi nhỏ (Từ giải pháp do vikas cung cấp) để phù hợp với trường hợp sử dụng của tôi.

Mở sự kiện cửa sổ bật lên khi di chuột cho nút bật lên
Giữ cửa sổ bật lên mở khi di chuột qua hộp cửa sổ bật lên
Đóng cửa sổ bật lên trên mouseleave cho nút bật lên hoặc hộp bật lên.

$(".pop").popover({
    trigger: "manual",
    html: true,
    animation: false
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
  <p class='text-muted'>KISS = Keep It Simple S....</p>

  <p class='text-primary'>Goal:</p>
  <ul>
    <li>Open popover on hover event for the popover button</li>
    <li>Keep popover open when hovering over the popover box</li>
    <li>Close popover on mouseleave for either the popover button, or the popover box.</li>
  </ul>

  <button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME
    </button>
  <br><br>
  <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME... Again!
    </button><br><br>
  <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    Okay one more time... !
    </button>
  <br><br>
  <p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
  <script src="script.js"></script>
</body>

</html>

Mở rộng đoạn mã

— OkezieE
nguồn

Điều này hoạt động hoàn hảo, tôi đã nhận thấy rằng có một thiếu sót ;trong bạn thứ hai $(_this).popover("hide"). Nhưng cảm ơn bạn, nó rất đơn giản và sạch sẽ!

— scapegoat

3

Câu trả lời này thật tuyệt vời. Hoạt động tốt trên BS3 kể từ tháng 5 năm 2015 ^^

— thoái hóa

1

Tôi đã sử dụng nó trong một bảng và tôi đã thêm container: 'body'vào các tùy chọn vì nó làm cho các ô dịch chuyển. Câu trả lời chính xác!

— Alexander Derck

Cửa sổ bật lên sẽ bị ẩn nếu bạn nhập nó và sau đó quay lại phần tử kích hoạt tất cả trước 300ms. Để khắc phục, hãy kiểm tra xem CẢ HAI cửa sổ bật lên và trình kích hoạt của nó là: di chuột trước khi ẩn nó trong setTimeout. Tôi cũng sẽ sử dụng setTimeout và cách tiếp cận tương tự trên mouseleave chính cửa sổ bật lên, để sửa lỗi nhấp nháy.

— rzb

Đảm bảo đặt animation:falseđể sửa lỗi nhấp nháy - kiểm tra trong liên kết Plunker mà tôi có ở trên. Nó hoạt động hoàn hảo cho tôi.

— OkezieE

84

Tôi đã đến sau một giải pháp khác cho vấn đề này ... đây là mã

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

— vikas devde
nguồn

6

Điều quan trọng là để thêm animation: falsetrường hợp di chuyển chuột qua liên kết liên tục sẽ gây ra nó không hoạt động chính xác

— jasop

5

Tôi có một sửa đổi nhỏ đối với mã của bạn @vikas ( gist.github.com/Nitrodist/7913848 ). Nó kiểm tra lại tình trạng sau 50ms để không bị kẹt ở trạng thái mở. Tức là nó liên tục kiểm tra lại sau mỗi 50ms.

— Nitrodist

2

Làm thế nào điều này có thể được điều chỉnh để nó hoạt động trên các phần tử trực tiếp vừa được thêm vào tài liệu?

— williamsowen

28

Đây là ảnh của tôi: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Đôi khi khi di chuyển chuột từ trình kích hoạt cửa sổ bật lên đến nội dung cửa sổ bật lên thực tế theo đường chéo , bạn di chuột qua các phần tử bên dưới. Tôi muốn xử lý những tình huống như vậy - miễn là bạn tiếp cận nội dung cửa sổ bật lên trước khi hết thời gian chờ, bạn sẽ an toàn (cửa sổ bật lên sẽ không biến mất). Nó yêu cầu delaytùy chọn.

Hack này về cơ bản ghi đè leavechức năng Popover , nhưng gọi chức năng gốc (khởi động bộ đếm thời gian để ẩn cửa sổ bật lên). Sau đó, nó gắn một trình nghe một lần vào mouseenterphần tử nội dung bật lên.

Nếu chuột vào cửa sổ bật lên, bộ hẹn giờ sẽ bị xóa. Sau đó, nó chuyển nó sang chế độ nghe mouseleavetrên cửa sổ bật lên và nếu nó được kích hoạt, nó sẽ gọi hàm nghỉ ban đầu để nó có thể bắt đầu hẹn giờ ẩn.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

— Wojtek Kruszewski
nguồn

5

Việc tìm vùng chứa có thể được cải thiện bằng cách sử dụng container = self.$tip;Cách này, thậm chí có thể tìm thấy cửa sổ bật lên khi thuộc containertính được đặt. Có một trò chơi ở đây: jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel tôi đã giải quyết được vấn đề này trong ngã ba của tôi về fiddle @Wojtek_Kruszewski 's: jsfiddle.net/HugeHugh/pN26d thấy phần mà kiểm tra if (!thisTip.is(':visible'))trước khi gọioriginalShow()

— H Dog

1

Nếu cửa sổ bật lên được khởi tạo với tùy chọn container: 'body',này, giải pháp này sẽ không hoạt động như mong đợi. Biến containercần được thay thế bằng self.$tip. Kiểm tra câu trả lời của tôi để biết thêm chi tiết: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

Xuất sắc. Điều này hoạt động khi sử dụng tham số 'selector', không giống như các câu trả lời khác.

— jetlej

1

Dưới đây là một phiên bản cải tiến mà sửa chữa một lỗi khi rời khỏi và reentering mũi vẫn hided nó, và cũng có thể sửa chữa kịch bản khi đầu được gắn vào cơ thể jsfiddle.net/Zf3m7/1499

— Zoltán Tamasi

14

Tôi nghĩ một cách dễ dàng sẽ là:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

Bằng cách này, cửa sổ bật lên được tạo bên trong chính phần tử đích. vì vậy khi bạn di chuyển chuột qua cửa sổ bật lên, nó vẫn ở trên phần tử. Bootstrap 3.3.2 hoạt động tốt với điều này. Phiên bản cũ hơn có thể gặp một số vấn đề với hoạt ảnh, vì vậy bạn có thể muốn tắt "animation: false"

— Cu Lý
nguồn

Tôi biết chủ đề này đã cũ, nhưng đây là giải pháp tốt nhất, sạch nhất theo ý kiến của tôi và nên được xếp hạng cao hơn. Cảnh báo duy nhất là điều này sẽ bị hỏng, nếu bạn đặt cửa sổ bật lên (theo một cách kỳ lạ) "cách xa" phần tử kích hoạt. Nhưng miễn là khoảng cách giữa cả hai bằng 0 (ví dụ: chúng chồng lên nhau), điều này hoạt động tuyệt vời và không yêu cầu bất kỳ JS tùy chỉnh nào. Cảm ơn bạn!

— JohnGalt

Đó là giải pháp tốt nhất, sạch sẽ, dễ dàng nhất cho đến nay. Nên được xếp hạng cao hơn! Tôi đã thêm delay: { "hide": 400 }để thêm một số độ trễ trước khi ẩn và nó hoạt động tuyệt vời! 👍

— coorasse

14

Tôi đã sử dụng bộ kích hoạt thành hovervà đặt bộ chứa cho #elementvà cuối cùng thêm vị trí của boxvào right.

Đây phải là thiết lập của bạn:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

và #examplecss cần position:relative;kiểm tra jsfiddle bên dưới:

https://jsfiddle.net/9qn6pw4p/1/

Đã chỉnh sửa

Fiddle này có cả hai liên kết hoạt động mà không có vấn đề gì http://jsfiddle.net/davidchase03/FQE57/4/

— David Chase
nguồn

hmm công trình đó, tôi có thể sử dụng jquery ajax trong contenttùy chọn, để có những nội dung từ máy chủ side..will rằng công việc hay tôi cần phải làm một số việc làm thêm cho điều đó

— vikas devde

@vikasdevde vâng bạn có thể sử dụng ajaxtrong nội dung nhưng bạn cần thiết lập để nó hoạt động ... vui lòng đánh dấu câu trả lời đúng nếu nó giải quyết được vấn đề của bạn OP.. để những người khác có thể hưởng lợi

— David Chase

nhưng nếu chúng ta sử dụng chính liên kết làm vùng chứa thì toàn bộ cửa sổ bật lên sẽ trở thành một liên kết .... hãy thử nó

— vikas devde

nếu bạn đặt một liên kết bên trong hộp nó vẫn sẽ liên kết ra ngoài .. đúng không?

— David Chase

2

Không có công việc của jsfiddle đối với tôi. Chrome 20 tháng 3 năm 2014.

— pferrel

7

Đây là cách tôi đã làm với cửa sổ bật lên bootstrap với sự trợ giúp của các bit khác trên mạng. Tự động lấy tiêu đề và nội dung từ các sản phẩm khác nhau hiển thị trên trang web. Mỗi sản phẩm hoặc cửa sổ bật lên có id duy nhất. Cửa sổ bật lên sẽ biến mất khi thoát khỏi sản phẩm ($ this .pop) hoặc cửa sổ bật lên. Thời gian chờ được sử dụng để hiển thị cửa sổ bật lên cho đến khi thoát qua sản phẩm thay vì cửa sổ bật lên.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

— hoektoe
nguồn

Điều này cũng sẽ hoạt động nếu cửa sổ bật lên không phải là con của phần tử đích. +1

— Taha Paksu

6

Đây là một giải pháp mà tôi nghĩ ra có vẻ hoạt động tốt trong khi cũng cho phép bạn sử dụng triển khai Bootstrap bình thường để bật tất cả các cửa sổ bật lên.

Bản gốc: https://jsfiddle.net/eXpressive/hfear592/

Chuyển đến câu hỏi này:

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

— eXpressiveDesign
nguồn

2

Tôi đồng ý rằng cách tốt nhất là sử dụng tài sản được đưa ra bởi: David Chase , Cu Ly và những người khác. Cách đơn giản nhất để thực hiện việc này là sử dụng thuộc container: $(this)tính như sau:

$(selectorString).each(
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
);

Tôi muốn chỉ ra ở đây rằng cửa sổ bật lên trong trường hợp này sẽ kế thừa tất cả các thuộc tính của phần tử hiện tại . Vì vậy, ví dụ: nếu bạn làm điều này cho một .btnphần tử (bootstrap), bạn sẽ không thể chọn văn bản bên trong cửa sổ bật lên . Tôi chỉ muốn ghi lại điều đó vì tôi đã dành khá nhiều thời gian cho việc này.

— diễn đàn
nguồn

1

Câu trả lời của Vikas hoạt động hoàn hảo với tôi, ở đây tôi cũng thêm hỗ trợ cho việc làm chậm (hiện / ẩn).

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

Ngoài ra, hãy chú ý tôi đã thay đổi:

if (!$(".popover:hover").length) {

với:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

để nó tham chiếu chính xác tại cửa sổ bật lên đã mở đó, chứ không phải bất kỳ cửa sổ nào khác (kể từ bây giờ, thông qua sự chậm trễ, nhiều hơn 1 có thể được mở cùng một lúc)

— user1993198
nguồn

Các bình luận tôi đã làm ở cuối là thực sự không đúng khi sử dụng container: cơ thể, nếu có thì vẫn Gotta Sử dụng giải pháp Vikas' cho rằng một dòng

— user1993198

1

Câu trả lời đã chọn hoạt động nhưng sẽ không thành công nếu cửa sổ bật lên được khởi tạo với bodylàm vùng chứa.

$('a').popover({ container: 'body' });

Một giải pháp dựa trên câu trả lời đã chọn là mã sau đây cần được đặt trước khi sử dụng cửa sổ bật lên.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

Thay đổi là tối thiểu bằng cách sử dụng self.$tipthay vì duyệt qua DOM với mong đợi cửa sổ bật lên luôn là anh chị em của phần tử.

— Rubens Mariuzzo
nguồn

0

Điều tương tự cho các chú giải công cụ:

Đối với tôi, giải pháp sau hoạt động vì nó không thêm trình xử lý sự kiện trên mọi 'con chuột' và có thể di chuột lại trên phần tử chú giải công cụ để giữ chú giải công cụ tồn tại.

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100

— phlppn
nguồn

0

Giải pháp này hoạt động tốt đối với tôi: (bây giờ là chống đạn) ;-)

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(this).is(':hover'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

— Johannes Ferner
nguồn

0

        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });

— Dinesh Sarak
nguồn

0

Tôi nhận thấy rằng mouseleaveý chí sẽ không kích hoạt khi những điều kỳ lạ xảy ra, như tiêu điểm cửa sổ thay đổi đột ngột, sau đó người dùng quay lại trình duyệt. Trong những trường hợp như vậy, mouseleavesẽ không bao giờ kích hoạt cho đến khi con trỏ đi qua và rời khỏi phần tử một lần nữa.

Giải pháp này tôi đã đưa ra dựa trên mouseentertrên windowđối tượng, vì vậy nó sẽ biến mất khi con chuột được di chuyển bất cứ nơi nào khác trên trang.

Điều này được thiết kế để hoạt động với việc có nhiều phần tử trên trang sẽ kích hoạt nó (như trong một bảng).

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});

— Gabriel Luci
nguồn

0

Nó sẽ linh hoạt hơn với hover():

$(".my-popover").hover(
    function() {  // mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  // mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)

— Xám Li
nguồn

0

Đơn giản :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});

— edmc73
nguồn

0

Gần đây tôi cần làm cho điều này hoạt động với KO và các giải pháp trên không hoạt động tốt khi có độ trễ hiển thị và ẩn. Dưới đây sẽ khắc phục điều này. Dựa trên cách hoạt động của chú giải công cụ bootstrap. Hy vọng điều này sẽ giúp ai đó.

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});

— Zarthost Boman
nguồn

-1

Đây là mã của tôi cho các chú giải công cụ động lực hiển thị có độ trễ và được tải bởi ajax.

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

Mở rộng đoạn mã

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

Mở rộng đoạn mã

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}

Mở rộng đoạn mã

— Giuliano
nguồn