logo标签列表

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

javascriptjqueryhtmlcsstwitter-bootstrap
5
我在网页上设置了Bootstrap工具提示。当你将鼠标悬停在图像上时，工具提示会显示出来。在工具提示中，我有一个链接，但当我将鼠标悬停在工具提示上单击链接时，它就会消失。
我的问题是（奇怪的是我似乎在任何地方都找不到答案），我如何让工具提示停留在其自身上方时保持打开状态。
我看到并尝试了一些解决方案，其中可以设置延迟，但我不想采取这种方式，因为我不喜欢那种效果。
任何帮助都将不胜感激，谢谢！
不确定它是否符合您的需求，但这基本上就是弹出窗口的作用。您可以在悬停等事件上触发它们。 - Lbatson
我也在考虑使用弹出框而不是工具提示。另一个选择是尝试延迟选项，请参见http://getbootstrap.com/javascript/#tooltips-usage？它可能会让工具提示保持足够长的时间以便单击链接。 - ckuijjer
3
请查看此链接：如何保持 Twitter Bootstrap 弹出窗口在鼠标移入时仍然保持打开状态？希望对您有所帮助。 - carito
7个回答
8
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}});
太棒了。完全按预期工作 -> 现在将其作为提示工具的可配置选项（使用data-delay作为HTML标签+对象上的选项）。以前从未这样扩展过bootstrap对象。你有时间调整答案吗？如果没有 - 我可以去做一些研究并包含它。 - iivel
我建议通过 container = $('#' + $(obj.currentTarget).attr('aria-describedby')); 获取工具提示容器。这样它也可以与 .tooltip({ container: 'body' }) 结合使用，后者经常用于避免由于相对定位而导致的问题。 - Oliver Schimmer
2

我是这样做的。

我在链接上触发工具提示 - 所以需要将a替换为相关元素：

初始化工具提示：

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

在鼠标悬停时保持工具提示处于打开状态，并在第一次鼠标悬停时添加一个辅助类（在我的情况下，工具提示始终会触发两个鼠标悬停事件，因此我必须确保仅在第一次鼠标悬停时添加“ .active”）

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

当鼠标移开时隐藏相应的工具提示... 这使用 tooltip-inner 触发，因为工具提示的小箭头仍然属于 .tooltip，可能会导致这样一种情况：您可能用光标移出了工具提示，但还没离开足够远，然后工具提示仍然保持打开状态...

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

我做的方式

  $(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');
        }); });
手动控制似乎是处理这个问题的最佳方式。我还将触发器容器添加到“mouseleave”函数中，以便即使用户从未将光标移动到工具提示上，工具提示也会隐藏。 - intcreator
1

$(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>

1
这对我有用：

$('[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');
});
0

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

tooltip-trigger="focus manual"
2
你是不是指的是 data-trigger？另外，根据文档，manual 选项不应与任何其他选项组合使用。 - intcreator
0

let tooltipTimer = false;
let isTooltipOpen = false;
let tooltipDelay = 100;

$(document).on('mouseover', '[data-bs-toggle=tooltip]', function(e) {
  $('.tooltip').tooltip('hide');
  
  $(e.currentTarget).tooltip({
    'trigger': 'manual',
    'html': true
  }).tooltip('show');
});

$(document).on('mouseleave', '[data-bs-toggle=tooltip]', function(e) {
  if (!isTooltipOpen) {
    tooltipTimer = setTimeout(function () { 
      $(e.currentTarget).tooltip('hide'); 
    }, tooltipDelay);
  }
});

$(document).on('mouseover', '.tooltip', function() {
  clearTooltipTimeout();
  
  isTooltipOpen = true;
});

$(document).on('mouseleave', '.tooltip', function(e) {
  tooltipTimer = setTimeout(function () { 
    $(e.currentTarget).tooltip('hide');     
  }, tooltipDelay);

  isTooltipOpen = false;
});

function clearTooltipTimeout()
{
  if (tooltipTimer) 
  {                            
    window.clearTimeout(tooltipTimer);
                                
    tooltipTimer = false;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <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 data-bs-toggle="tooltip" title="Tooltip open on hover!">Tooltip</a>

</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接