Question

我在我的网页上设置了引导工具提示。当您翻转图像时，工具提示会显示，在工具提示中我有一个链接，当我滚动实际工具提示以单击链接时...它会逐渐消失。

我的问题（我奇怪似乎无法在任何地方找到答案）是当我将鼠标悬停在实际工具提示本身上时，如何让工具提示保持打开状态。

我已经看过并尝试了一些可以设置延迟的解决方案，但我不想走向那个方向，因为我不喜欢这种效果。

任何帮助都会很棒，谢谢！

Answer 1

var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
$.fn.tooltip.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('.tooltip')
    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.tooltip.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};


$('body').tooltip({ selector: '[data-toggle]', trigger: 'click hover', placement: 'bottom auto', delay: {show: 50, hide: 400}});

Answer 2

I did it this way.

I'm triggering the tooltip on a link - so the a would have to be replaced to the relevant element:

Initialize the tooltip:

    $(document).ready(function() {
      $('a').tooltip();
    })

Keep Tooltip open on mouseover + add a helper class on first mouseover (the tooltip alway triggered two mouseover events in my case - so I had to be sure only to add .active in the first go)

    $(document).on('mouseover','.tooltip', function() {
      var tooltipTrigger = $('a[aria-describedby="' + $(this).attr('id') + '"');
      if(! $(tooltipTrigger).hasClass('active')) {
        $(tooltipTrigger).tooltip('show').addClass('active');            
      }
    });

Hide the corresponding tooltip when mouseout happens... this uses tooltip-inner to trigger, because the little arrow of the tooltip, which still belongs to .tooltip, can lead to a case, where you might go out of the tooltip with the cursor, but not far enough, and then the tooltips remains open...

    $(document).on('mouseout','.tooltip-inner', function() {
      $('a.active').tooltip('hide').removeClass('active');
    });

Answer 3

我的方式

  $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip({
            trigger: "manual"
        });

        $('body').on('mouseleave', '.tooltip', function () {
            $('[data-toggle="tooltip"]').tooltip('hide');
        });

        $('[data-toggle="tooltip"] > i').on('mouseenter', function () {
            $('[data-toggle="tooltip"]').tooltip('show');
        });

        $('[data-toggle="tooltip"]').on('click', function () {
            $(this).tooltip('show');
        }); });

Answer 4

试试这个。这可能有所帮助。

tooltip-trigger="focus manual"

Answer 5

$(document).ready(function(){

    $(document).on("mouseover", "#myLink", (event) => {

        $(event.target).tooltip(
            {
                trigger: 'manual',
                delay: { "hide": 500 }
            }).tooltip("show");
    });

    var isOver = false;

    $(document).on("mouseleave", "#myLink", (event) => {
        setTimeout(function () { }, 1000);

        if (!isOver)
            setTimeout(function () { $('#myLink').tooltip('hide'); }, 500);
    });

    $(document).on("mouseover", ".tooltip", (event) => {

        isOver = true;
    });

    $(document).on("mouseleave", ".tooltip", (event) => {

        setTimeout(function () { $('#myLink').tooltip('hide'); }, 500);
    });
    
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" id="myLink" data-toggle="tooltip" title="Stay over me!">Hover over me</a>


</body>
</html>

Answer 6

这对我有用：

$('[data-toggle="tooltip"]').tooltip({
    trigger: "manual"
});

$('[data-toggle="tooltip"]').on('mouseleave', function () {
    $(this).tooltip('hide');
});

$('[data-toggle="tooltip"]').on('mouseenter', function () {
    $(this).tooltip('show');
});

$('[data-toggle="tooltip"]').on('click', function () {
    $(this).tooltip('hide');
});

Bootstrap工具提示在悬停时保持打开状态

6 个答案: