Menu
In my Angular 6 app, I'm currently using the Tooltip feature from ngx-bootstrap to show tooltips.
I need to show the tooltips in some disabled buttons, however it does not work (it only works with non-disabled buttons).
Is there a way to change this behaviour and always show the tooltip (regardless if the item is disabled) ?
676
By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps: Add a disabled element like the button element into a div whose display style is set to inline-block . Set the pointer event as none for the disabled element (button) through CSS.
To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
Please read this article: https://jakearchibald.com/2017/events-and-disabled-form-fields/
Probably Chrome and many other browsers stop emitting all mouse events on disabled form fields, including buttons.
I stuck in similar scenario and this Workaround worked very well for me
triggers="pointerenter:pointerout"
Depending on content used inside button it may require to add pointer-events: none; in CSS for them.
Confirmed to work on following browser:
Chrome 73+
FF 66+
IE 11+
Edge 42+
I hope it may help you!
111
the best solution is pack button by span like the example below:
<span tooltip="ivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
<button type="button" class="btn btn-default btn-secondary mb-2 disabled">
Tooltip
</button>
</span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
