-1

I have created toast using ngx-toastr in angular base UI. I want something like skype notification when user hovers on toast it should allow clicking on elements behind it which are hidden under it.

When toast comes in the top right at that position I have a button to do something, a toast appears exact over it and makes button not accessible for user until it disappears Is there some feature that when user hover over toast it becomes less opaque and should allow user to click button through it

Thomas John
  • 2,138
  • 2
  • 22
  • 38
  • Please add what you have tried and more detailed description what you need to do. – Sudarshana Dayananda Feb 19 '19 at 10:46
  • edited as ------------- when toast comes in top right at that position I have button to do something, toast appears exact over it and makes button not accessible for user until it disappears Is there some feature that when user hover over toast it becomes less opaque and should allow user to click button through it ------Please check now –  Feb 19 '19 at 10:55
  • You can use `onTap` method to catch tap event on toast but there is nothing about hover in documentation. go through https://www.npmjs.com/package/ngx-toastr and try something if you have error come to stackoverflow. – Sudarshana Dayananda Feb 19 '19 at 11:01

1 Answers1

1

Just to make sure i got the question right, you want to be able to see through the ngx toast and click on the underlying elements, right?

You can add this to the CSS file ( either globally or component level css ) of your app

::ng-deep #toast-container > div {
    opacity: 0.8 !important;
    pointer-events: none !important;
}
Pavan Skipo
  • 1,757
  • 12
  • 29