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/
$('[data-toggle="tool-tip"]').tooltip();
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
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
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