工具提示不出现或不消失

Posted 2023-05-08

【中文标题】工具提示不出现或不消失

【英文标题】：Tooltips either not appearing or not disappearing

【发布时间】：2019-12-03 03:04:37

【问题描述】：

我一直在尝试让 Bootstrap 工具提示正常工作。下面是我在 Rails 5.2 中的代码。

在版本 1 中，当按钮被禁用时，工具提示不起作用。但是，如果我将禁用的按钮包装在一个跨度中，则工具提示会出现在悬停时，但是当光标移开时，它会间歇性地消失，但并非总是如此。大多数时候它没有。

请帮忙，我整天都在做这个。

这是一个 JS Fiddle。

http://jsfiddle.net/f486veo7/2/

JS

 $('[data-toggle="tool-tip"]').tooltip();

版本 1：

    tag.button  id: "save-search-btn-disabled",
                class: "btn btn-outline-primary disabled",
                disabled: true,
                style: "display: none",
                'data-toggle':"tool-tip", 'data-placement': "top", 'title': "Your limit was reached" do
      "Save Search"
    end

版本 2：

   tag.span class:'btn p-0',
          'data-toggle':"tool-tip", 'data-placement': "top", 'title': "Your limit was reached" do
    tag.button  id: "save-search-btn-disabled",
                class: "btn btn-outline-primary disabled",
                disabled: true,
                style: "display: none" do
      "Save Search"
    end
   end

【参考方案1】：

编辑 您还应该将pointer-events: none; 样式添加到内部（禁用）按钮。这使得元素对于输入事件对其父级是透明的。 编辑

Documentation 说：

当目标元素为display: none;时调用tooltip会导致tooltip定位不正确。

要将工具提示添加到disabled 或.disabled 元素，请将元素放在<div> 内，然后将工具提示应用到<div>。

顺便说一句：你的问题是 display: none 风格，而你的小提琴风格是 display: inline

【讨论】：

我在显示后应用了工具提示，观察得很好，但不是原因，因为 JsFiddle 即使在 display: inline 时也不起作用。

@user2012677 还有一件事：查看编辑后的答案

指针很有帮助，我还需要从 inline 更改为 inline-block。