javascript - How to show the Tooltip even on disabled buttons with ngx-bootstrap - Stack Overflow

admin管理员组

文章数量:1291093

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) ?

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) ?

• javascript
• angular
• typescript
• tooltip
• ngx-bootstrap

Share Improve this question Follow asked Jul 16, 2018 at 12:39 Francesco BorziFrancesco Borzi 62k5555 gold badges197197 silver badges275275 bronze badges 3

• 2 Check if the disabled button has pointer-events: none. If no other options, I would wrap my disabled button in a div and have to tooltip on it instead of the button. – yotke Commented Jul 16, 2018 at 12:45
• @Francesco Borzì: have you found any solution for this ? do you have any demo for it ? – HDJEMAI Commented Jan 13, 2019 at 5:59
• @HDJEMAI it's been a while I haven't investigated on this issue, however normally I post the solution when I find it myself, so probably not :( – Francesco Borzi Commented Jan 13, 2019 at 10:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Please read this article: https://jakearchibald./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!

Try the example using disabled class I had success.

<div class="card">
    <div class="card-header">
        <h3>Test</h3>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-default btn-secondary mb-2 disabled "
                tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                placement="top">
            Tooltip
        </button>
    </div>
</div>

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>

本文标签： javascriptHow to show the Tooltip even on disabled buttons with ngxbootstrapStack Overflow