Tooltips either not appearing or not disappearing

Question

I have been trying to get Bootstrap tooltips to work. Below is my code in Rails 5.2.

In Version 1, when the button is disabled, tooltips does not work. However, if I wrap the disabled button in a span, tooltips appears on hover, but when the cursor moves away, it intermittently disappears, but not always. Most of the time it does not.

Please help, I have been working on this all day.

Here is a JS Fiddle.

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

JS

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

Version 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

Version 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

EDIT You should also add pointer-events: none; style to the inner (disabled) button. This makes element to be transparent to its parent for input events. EDIT

Documentation says:

Invoking tooltip when the target element is display: none; will cause the tooltip to be incorrectly positioned.

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

By the way: your question states style display: none and your fiddle has style display: inline