工具提示不出现或不消失

Question

我一直在努力让 Bootstrap 工具提示发挥作用。下面是我在 Rails 5.2.

中的代码

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

请帮忙，我已经忙了一整天了。

这是一个JS Fiddle.

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

Answer 1

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

Documentation 说：

当目标元素为 display: none; 时调用工具提示将导致工具提示定位不正确。

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

顺便说一下：你的问题说明风格 display: none 而你的 fiddle 有风格 display: inline

工具提示不出现或不消失

Tooltips either not appearing or not disappearing

jquery

ruby-on-rails

twitter-bootstrap

jquery-ui-tooltip

JS

版本 1：

版本 2：