-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

3
  • Please add what you have tried and more detailed description what you need to do. Feb 19, 2019 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
    – user10780294
    Feb 19, 2019 at 10:55
  • You can use onTap method to catch tap event on toast but there is nothing about hover in documentation. go through npmjs.com/package/ngx-toastr and try something if you have error come to stackoverflow. Feb 19, 2019 at 11:01

1 Answer 1

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;
} 
2
  • make sure not use the same id at other place, otherwise the others also would get overridden! :) Feb 21, 2019 at 9:02
  • It needs to get overridden, that is the requirement, the question says that all ngx toasts need to be made see thru and clickable inside Feb 21, 2019 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.