Can I set onclick handler to the entire Notify Quasar element instead of triggering an API button

Question

I have a Notify element inside the page, clicking on the entire Notify div I need to run a function (from a Pinia store). So now the click is set to the label (button) element, but I need to place the click handler on the entire Notify element. And I'd also like to understand how to add a css hover effect on the entire Notify element, as the ".q-notify:hover { cursor: pointer !important;} " - doesn't work

const showNotify = {
  info(index: any) {
    Notify.create({
      type: 'info',
      icon: '',
      message: title,
      caption: getCaption(data),
      timeout: 3000,
      actions: [
        {
          noDismiss: true,
          label: 'Open Sidebar', // don't need this label instead
          handler: () => {
            notificationsStore.openSidebarNotifications()
          },
        },
      ],
    })
    setTimeout(() => {
      showNotify.info(index + 1)
    }, 1000)
  },
}

Answer 1

There's nothing in the API that allows this, but you can use document.querySelector and addEventListener to add a click event listener, which can be done after creation.

await Notify.create({
  type: "info",
  icon: "",
  message: title,
  timeout: 3000,
});

const notif = document.querySelector(".q-notification");
notif.addEventListener("click", myFunction);

Be sure to await the Notify.create() otherwise the querySelector won't work.

For applying CSS, target the .q-notification class, as that's the class on the actual pop-up.

.q-notification:hover {
  cursor: pointer !important;
}