Toastr: How to prevent fade out with sticky toast on mouseover?

Question

I've been playing with toastr and have successfully set the timeout to 0 so the toast remains sticky, however the toast disappears when I mouse out of the toast. I'd like to override this so the toast only goes away if the user clicks it - ideal for toasts with lots of text. How can this be done?

Solution 1

Set extendedTimeOut to 0 too. That will keep it sticky.

Solution 2

timeOut and extendedTimeOut must be set to 0.

Here is a complete example:

toastr.options = {
    timeOut: 0,
    extendedTimeOut: 0
};

toastr.info("Testing <button>blah</button>");

For those who wish to not close the toast on click, the example changes to:

toastr.options = {
    timeOut: 0,
    extendedTimeOut: 0,
    tapToDismiss: false
};

toastr.info("Testing <button>blah</button>");

Solution 3

you could also use disableTimeOut as an alternative to setting both timeOut and extendedTimeOut to 0.

toastr.options = {
    disableTimeOut : true, //Equivalent ot timeOut: 0 and extendedTimeOut: 0
}

Comments

[Leniel Maccaferri]

I'm really enjoying Toastr in a current project. Thanks John for all the work you give away to the community.

[Vitalik]

This seems to be case sensitive: ` "timeOut": "0", "extendedTimeOut": "0"`

[Pritam Karmakar]

@JohnPapa - I'm heavily using toastr in my project, its awesome. I'm facing one issue with sticky toastr. Could you please help me with how I can close a sticky toastr? I have a button in the sticky toast and I want to close the toast once user click on that button. In the button click event I have used ' toastr.options.timeOut = 5;' but the toastr is not disappearing. Thanks in advance.

[Benjamin Lucidarme]

Thanks for TapToDismiss. But now, if I want to set timeOut: 5000, extendedTimeOut: 0 will not work anymore. Any idea?

[Adam]

timeout also needs to be set to 0!!