Nuxt•2d ago

I don't want timeout to pause on hover for nuxt ui toast

currently i do the below

  toast.add({
    title: 'Signing out!',
    color: 'orange',
    icon: 'mingcute:alert-line',
    timeout: 2000,
  })

  toast.add({
    title: 'Signing out!',
    color: 'orange',
    icon: 'mingcute:alert-line',
    timeout: 2000,
  })

Additionally, i don't want the timeout to pause if i hover over this notification.

4 Replies

kapa.ai•2d ago

Hi @Harsh Patel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you want to prevent the timeout from pausing when hovering over a Nuxt UI toast notification. Unfortunately, based on the provided knowledge sources, there isn't a direct way to disable this behavior for the Nuxt UI Notification component. The default behavior, as described in the Notification documentation (https://ui.nuxt.com/components/notification#timeout), is:

When hovering the Notification, the progress bar will be paused.

This pause-on-hover feature seems to be built into the component without an option to disable it. However, you can try a workaround: 1. Set the timeout to a very short duration, like 100ms. 2. Use the callback prop to implement your own timeout logic. Here's an example of how you might implement this:

const toast = useToast()

function showToast() {
  const startTime = Date.now()
  const duration = 2000 // 2 seconds

  toast.add({
    title: 'Signing out!',
    color: 'orange',
    icon: 'mingcute:alert-line',
    timeout: 100, // Set to minimum
    callback: () => {
      const elapsedTime = Date.now() - startTime
      if (elapsedTime < duration) {
        // If the desired duration hasn't passed, show the toast again
        showToast()
      }
    }
  })
}

showToast()

const toast = useToast()

function showToast() {
  const startTime = Date.now()
  const duration = 2000 // 2 seconds

  toast.add({
    title: 'Signing out!',
    color: 'orange',
    icon: 'mingcute:alert-line',
    timeout: 100, // Set to minimum
    callback: () => {
      const elapsedTime = Date.now() - startTime
      if (elapsedTime < duration) {
        // If the desired duration hasn't passed, show the toast again
        showToast()
      }
    }
  })
}

showToast()

This approach uses the callback prop, which is documented in the Notification Callback section (https://ui.nuxt.com/components/notification#callback). It will keep reshowing the toast until the desired duration has passed, regardless of whether the user hovers over it or not. Please note that this is a workaround and may not be ideal in all situations. It might cause slight visual flickering as the toast is repeatedly hidden and shown. If this behavior is crucial for your application, you might want to consider creating a custom notification component or requesting this feature from the Nuxt UI maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@448740493468106753> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Harsh PatelOP•2d ago

the code kapa suggested, keeps infinitly looping. created a PR since this seemed impossible

Harsh PatelOP•2d ago

https://github.com/nuxt/ui/pull/2661

GitHub

[WIP] feat(toast): add pauseOnHover functionality to notifications ...

🔗 Linked issue Not linked to an issue. ❓ Type of change 📖 Documentation (updates to the documentation or readme) 🐞 Bug fix (a non-breaking change that fixes an issue) 👌 Enhancement (improving a...

Gaming

Programming

I don't want timeout to pause on hover for nuxt ui toast