在悬停时出现Bootstrap Popover出现/消失而不是单击

5 回答

• 335

  将弹出框的 trigger 选项设置为 hover 而不是 click ，即default .

  这可以使用标记中的 data-* 属性来完成：

  <a id="popover" data-trigger="hover">Popover</a>
  

  或者使用初始化选项：

  $("#popover").popover({ trigger: "hover" });
  

  这是 DEMO .

  回复于 2024-04-30T08:07:13+08:00
• 29

  我想补充一点，为了获取可访问性，我认为你应该添加焦点触发器：

  即 $("#popover").popover({ trigger: "hover focus" });

  回复于 2024-04-30T08:07:13+08:00
• 0

  如果你想悬停弹出窗口本身，你必须使用手动触发器 .

  这就是我提出的：

  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')) // change $(this) to $(_this) 
                  {
                      $(_this).popover('hide');
                  }
              }
          }, 200);
      });
  }
  

  回复于 2024-04-30T08:07:13+08:00
• 6

  您描述的功能可以使用Bootstrap工具提示轻松实现 .

  <button id="example1" data-toggle="tooltip">Tooltip on left</button>
  

  然后为元素调用tooltip（）函数 .

  $('#example1').tooltip();
  

  http://getbootstrap.com/javascript/#tooltips

  回复于 2024-04-30T08:07:13+08:00
• 10

  在尝试了一些这些答案并发现它们不能很好地扩展多个链接之后（例如，接受的答案需要为每个链接提供一行jquery），我遇到了一种需要最少代码才能工作的方法，并且它似乎也很完美，至少在Chrome上 .

  您添加此行以激活它：

  $('[data-toggle="popover"]').popover();
  

  这些设置到你的锚链接：

  data-toggle="popover" data-trigger="hover"
  

  See it in action here，我使用与接受的答案相同的导入，因此它应该在旧项目上正常工作 .

  回复于 2024-04-30T08:07:13+08:00