Angular - Tooltip does not show for disabled buttons in Chrome

Question

I have this code for buttons and I want to shows the tooptips for disabled button. This works fine in Firefox and IE, but does not work in Chrome. In Chrome, only the buttons that are enabled showed the tooltip.

<div *ngFor"let btn of buttons">
   <button [tooltip]="'Tooltip'" [disabled]="btn.disable">
</div>

this may help, https://github.com/angular-ui/bootstrap/issues/1025 — svarog, Nov 27 '17 at 11:32
Please see https://stackoverflow.com/questions/48277909/angular-material-how-to-add-a-tooltip-to-a-disabled-button — Eray T, May 14 '18 at 19:03

score 13 · Answer 1 · answered Nov 27 '17 at 11:48

13

This solution works for me:

<div *ngFor"let btn of buttons">
   <div [tooltip]="'Tooltip'">
      <button class='btn' [disabled]="btn.disable">
   </div>
</div>

<style>
   .btn:disabled{
      pointer-events: none;
   }
<style>

answered Nov 27 '17 at 11:48

matchi

533
2
6
17

1

This is also how I would have done it, but please consider leaving some explanation about what the code actually does, detailed answers get upvoted quickly. – svarog Nov 29 '17 at 09:01

Angular - Tooltip does not show for disabled buttons in Chrome

1 Answers1