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.
5 Replies
kapa.ai
kapa.ai4w 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
kapa.ai4w ago
<@448740493468106753> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Harsh Patel
Harsh PatelOP4w ago
the code kapa suggested, keeps infinitly looping. created a PR since this seemed impossible
Harsh Patel
Harsh PatelOP4w ago
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...
Harsh Patel
Harsh PatelOP4w ago
that would break a lot of other behaviors tho like general hover affects and what not
Want results from more Discord servers?
Add your server