【问题标题】:Bootstrap's tooltip doesn't disappear after button click & mouseleave按钮单击和鼠标离开后,Bootstrap 的工具提示不会消失
【发布时间】:2016-02-08 15:20:07
【问题描述】:

我对 bootstrap 的工具提示有疑问:当我点击一个按钮时,即使光标在按钮之外,工具提示仍然存在。我查看了手册 - Bootstrap's tooltip,如果我点击按钮,我会看到同样的问题。有什么解决方案可以解决这个问题吗?刚刚在最新的FF,IE中试过。

【问题讨论】:

  • 我的问题中的链接也不起作用,让我们看看那里。有同样的问题。

标签: javascript twitter-bootstrap tooltip


【解决方案1】:

这是因为trigger 没有设置。触发器的默认值为'hover focus',因此在单击按钮后工具提示保持可见,直到单击另一个按钮,因为该按钮是focused。

所以您只需将trigger 定义为'hover'。在单击按钮后没有持久工具提示的情况下链接到的同一示例下方:

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

小提琴中的文档示例 -> http://jsfiddle.net/vdzvvg6o/

【讨论】:

  • 谢谢大卫,真的很管用。我上次误解了工具提示的触发选项,现在我是对的。
  • @SilentCry 请记住您的目标是谁,触发“悬停”可能并不总是那么容易/常见。
  • @davidkonrad 移动平台,盲人用户。也可以解释为什么他们将“悬停焦点”设置为默认值。
  • @phk,bootstrap 存在一个普遍的问题,即不是移动优先,对于盲人,我们应该使用 aria-attributes。顺便说一句,有一个为加拿大当局开发的用于测试可用性的好工具,您可以满足几个“级别” -> achecker.ca/checker/index.php 我的国家没有这些标准,但值得跟上无论如何。
  • 您可能想看看下面 Karmonik Cola 的回答。它一直在焦点上显示工具提示。
【解决方案2】:

我知道一岁多,但我无法在这里使用任何示例。我不得不使用以下内容:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

这也会在悬停时再次显示工具提示。

【讨论】:

  • 这必须是公认的答案,也应该在引导代码库中实现。
  • 这对于放置在带有“悬停”触发器的按钮上的引导工具提示非常有用,该触发器会导致异步回发(即显示模式面板)。没有这个,按钮按下的回发会导致工具提示“卡住”并且永远不会消失。
  • 就我而言,我在执行 ajax 操作时禁用了提交按钮。当 ajax 进程运行时,工具提示将保留,因为按钮被禁用。 ajax 进程完成后,按钮将再次变为“可用”。悬停在按钮上然后离开按钮会关闭工具提示。 Nitai 的解决方案解决了一切问题。现在,工具提示会在单击时隐藏,并且在按钮再次变为活动状态后仍然可以在悬停时工作。
  • 我同意@kjdion84。我一直在挣扎,直到找到这个
  • 这就是答案。
【解决方案3】:

您好,我对此问题几乎没有解决方案。当其他解决方案不起作用时,请尝试以下解决方案:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

这也是拖放的解决方案。 所以我希望这对某人有帮助:)

【讨论】:

  • 我只遇到了 Telerik Kendo 网格按钮的问题。当我单击一个时,工具提示不会隐藏。这解决了它!
  • 当我使用 dispose 而不是 destroy 时,这对我有用
  • 当我使用 dispose 而不是 destroy 时,这对我有用
【解决方案4】:

在我的情况下,该问题仅在 Internet Explorer 中重现:无论哪个元素(输入、div 等...)具有工具提示 - 如果单击 - 工具提示仍然显示。

在 web 上找到了一些解决方案,建议使用 .hide() 元素的工具提示 Click 事件 - 但这是个坏主意 - 将鼠标悬停回同一个元素 - 使其隐藏... 就我而言

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

创造了所有的魔法!!!- .myToolTippedElement 是具有课程工具提示的元素...

【讨论】:

  • 也适用于我,并且与公认的解决方案相比具有优势,即保持焦点显示工具提示。
  • 正是我想要的!
  • 正是我想要的! :P
【解决方案5】:

在带有 bootstrap 4 和 jquery 的 angular 7 中,我发现了这个,它工作正常。我使用 dispose 是因为它破坏并不会隐藏工具提示。

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

【讨论】:

    【解决方案6】:

    工作解决方案

    $(document).on("click",function()
        {
        setTimeout(function()
        {
    
      $('[data-toggle="tooltip"]').tooltip('hide');
    
    },500);    // Hides tooltip in 500 milliseconds
        });
    

    【讨论】:

    【解决方案7】:

    这也可以通过添加以下内容在 HTML 中实现:

     data-trigger="hover"
    
     <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>
    

    【讨论】:

    • 遗憾的是这不起作用,工具提示仍然卡住。
    • Tnx,唯一对我有用的解决方案,因为我在(鼠标悬停)上调用了 toogleTooltip 方法
    • 为我工作。 (我只有 Bootstrap 4 和 jQuery)
    【解决方案8】:

    大卫上面的回答帮助解决了我的问题。 我在按钮上有悬停和单击事件。 MAC 上的 Firefox 确实如我所愿。也就是说,悬停时显示工具提示,点击时不显示工具提示。 在其他浏览器和操作系统上,当我单击时,工具提示会出现并保持显示。即使我将鼠标移动到其他按钮进行悬停。 这就是我所拥有的:

    $('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 
    

    这是解决方法:

    $('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 
    

    【讨论】:

      【解决方案9】:

      你也可以添加:

      onclick="this.blur()"
      

      【讨论】:

      • 这与 Kamornik Cola 的提议有何不同(除了没有 jQuery 的实现)?我建议添加一些解释以使答案有所帮助。最好的问候
      【解决方案10】:

      尝试使用rel="tooltip" 而不是data-toggle="tooltip",这在我的情况下有效。我正在使用data-toggle="tooltip" 并将触发条件设置为悬停,这在我的情况下不起作用。当我更改我的数据选择器时,它起作用了。

      HTML 代码:

      <button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>
      

      JS 代码 //工具提示 $('.btn').tooltip({ 触发器:“悬停” });

      这肯定会删除卡住的工具提示。

      【讨论】:

        【解决方案11】:

        我解决此问题的方法是使用以下代码删除点击事件函数中的工具提示:

        $("#myButton").on("click", function() {
            $("div[role=tooltip]").remove();
        });
        

        【讨论】:

        • 悬停时能否再次获得工具提示?
        【解决方案12】:

        使用 Bootstrap 5

        工具提示现在以普通/原版 Javascript 进行初始化。因为我在这里只看到了 JQuery 选项,所以让我在纯 JS 中发布非常简单直接的方式:

        //Initialize bootstrap tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map( function(tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl, {
          trigger : 'hover'
          });
        });
        

        您只需添加“{trigger : 'hover'}”对象作为 bootstrap.Tooltip(element, options) 的选项即可。

        来源:https://getbootstrap.com/docs/5.1/components/tooltips/#usage

        【讨论】:

          【解决方案13】:

          您也可以使用下面的方法来隐藏mouseleave上的工具提示,如下:

          jQuery("body").on("mouseleave", ".has-tooltip", function(){
              jQuery(this).blur();
          });
          

          【讨论】:

            【解决方案14】:

            您也可以将这种方式用于旧版本,因为接受的答案对我不起作用,我为自己编写了这段代码并且效果很好。

            $(document).on('mousedown', "[aria-describedby]", function() {
                $("[aria-describedby]").tooltip('hide');
            });
            

            【讨论】:

              【解决方案15】:

              这个解决方案对我有用。

              $('a[data-toggle="tooltip"]').tooltip({
                animated: 'fade',
                placement: 'bottom',
                trigger: 'click'
              });
              
              $('a[data-toggle="tooltip"]').click(function(event){
                event.stopPropagation();
              });
              
              $('body').click(function(){
                $('a[data-toggle="tooltip"]').tooltip('hide');
              });
              

              fiddle

              我尝试了之前答案中给出的大多数解决方案,但没有一个对我有用。

              【讨论】:

              • 谢谢。这对我来说很好。但是我们怎样才能额外添加悬停呢?通过悬停打开工具提示?
              【解决方案16】:

              我在带有 Safari 的 iPhone 上使用 Bootstrap 4 时遇到了这个问题。

              在 PC/桌面上,工具提示运行良好。 但是,在装有 iOS 14 的 iPhone 上查看时,单击/点击按钮后,工具提示仍然可见。隐藏图层时也是如此。

              对我来说,添加此代码解决了 iPhone 上的问题:

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

              【讨论】:

              • 这发生在我的 MacOS Chrome 上,你的回答为我解决了问题。
              【解决方案17】:

              我的问题出在 DataTable 中。下面的代码对我有用。

              columnDefs: [
                  {
                      targets: 0, data: "id", 
                      render: function (data, type, full, meta) {
                          return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>';
                      }
                  }
               ],
              drawCallback: function() {
                  $('[data-toggle="tooltip"]').tooltip();
                  $('[data-toggle="tooltip"]').on('click', function () {
                      $(this).tooltip('hide');
                  });
              }
              

              【讨论】:

                【解决方案18】:

                对我来说,仅当我输入此代码时才有效。 P.S.:我使用的是 Bootstrap 4。

                
                $("body").tooltip({
                    selector: '[data-toggle=tooltip]',
                    trigger: 'hover'
                }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
                    $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('hide');
                });
                
                

                【讨论】:

                  【解决方案19】:

                  我在 cycle.js 中使用引导工具提示,但上述方法都不适合我。

                  我必须这样做:

                  return button( selector + '.btn.btn-sm', 
                               {
                                 hook: {
                                   destroy: tooltipOff,
                                   insert:  toggleTooltipOn,
                                 },
                  ....
                  
                  function toggleTooltipOn(vnode){
                    setupJQuery();  
                    jQuery[0].$( vnode.elm )
                      .tooltip({container:'body', trigger: 'hover');
                  //container:body is to help tooltips not wiggle on hover
                  //trigger:hover is to only trigger on hover, not on click
                  }
                  
                  function tooltipOff( vnode ){
                    setupJQuery();      
                    jQuery[0].$( vnode.elm ).tooltip('hide');
                  }
                  

                  【讨论】:

                    【解决方案20】:

                    这对我有用:

                    $(document).ready(function() {
                       $('#save').tooltip({
                                trigger : 'hover'
                            }) ;
                    
                    });
                    

                    我正在动态禁用保存按钮然后问题是。

                    【讨论】:

                    • 这里保存的是我的按钮的 id
                    【解决方案21】:

                    在我的情况下,这是修复:

                    beforeDestroyingElement() {    
                      $('[data-toggle="tooltip"]').tooltip('hide');
                    }
                    

                    我没有遵守 Bootstrap 文档中的这条规则:

                    在从 DOM 中移除相应元素之前,必须隐藏工具提示。

                    【讨论】:

                      【解决方案22】:

                      如果有人想设置一个在点击后会显示一段时间的工具提示,我就是这样做的:

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

                      【讨论】:

                        【解决方案23】:

                        使用强制 blur() 可能会降低用户体验。我不会那样做的。我发现删除“data-original-title”以及删除属性“data-toggle”和“title”对我有用。

                            $(id).tooltip('hide');
                            $(id).removeAttr("data-toggle");
                            $(id).removeAttr("data-original-title");
                            $(id).removeAttr("title");
                        

                        【讨论】:

                          【解决方案24】:

                          使用委托使其对 ajax 友好,

                          // if you're not using turbolinks, then you can remove this parent wrapper
                          $(document).on('turbolinks:load'), function() {  
                            // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
                            $('body').tooltip({
                              select: "[data-toggle='tooltip']"
                            });
                          
                            // remove old tooltip from sticking on the page when calling ajax with turbolinks
                            $('body').on('click', "[data-toggle='tooltip']", function() {
                              $(this).tooltip('dispose');
                            });
                          });
                          

                          【讨论】:

                            猜你喜欢
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 2022-07-25
                            • 1970-01-01
                            • 2012-08-07
                            • 1970-01-01
                            • 2013-07-23
                            • 1970-01-01
                            相关资源
                            最近更新 更多