11

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

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
  • 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 Jul 16 '18 at 12:45
  • @Francesco Borzì: have you found any solution for this ? do you have any demo for it ? – HDJEMAI Jan 13 '19 at 05: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 Jan 13 '19 at 10:36

3 Answers3

4

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!

Ambuj Khanna
  • 1,131
  • 3
  • 12
  • 32
  • If it works to anyone or you feel this could be answer then I would request you to please mark it as accepted answer so it will help other folks too. Thanks! – Ambuj Khanna Nov 08 '21 at 04:41
2

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>
HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Andrey Hideki Nakano
  • 31
  • 3
  • Can you add a demo or a stackblitz demo, to show that it is working this way ? if any class needed that you added, can you add a comment to explain them ? – HDJEMAI Jan 16 '19 at 01:49
1

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>
marianciu
  • 557
  • 4
  • 12