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?

score 69 · Accepted Answer · edited Sep 18 '14 at 13:26

69

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

edited Sep 18 '14 at 13:26

Zyo

1,934
21
25

answered Jul 02 '13 at 00:17

John Papa

21,880
4
61
60

I'm really enjoying `Toastr` in a current project. Thanks John for all the work you give away to the community. – Leniel Maccaferri Aug 29 '14 at 23:23
3

This seems to be case sensitive: ` "timeOut": "0", "extendedTimeOut": "0"` – Vitalik Sep 08 '14 at 12:56
@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. – Pritam Karmakar May 02 '16 at 17:28
1

`timeout` also needs to be set to `0`!! – Adam Nov 05 '17 at 00:05

score 29 · Answer 2 · edited May 16 '17 at 08:25

29

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>");

edited May 16 '17 at 08:25

Paolo Forgia

6,572
8
46
58

answered Mar 22 '17 at 16:00

rynop

50,086
26
101
112

1

Thanks for `TapToDismiss`. But now, if I want to set `timeOut: 5000`, `extendedTimeOut: 0` will not work anymore. Any idea? – Benjamin Lucidarme May 16 '17 at 08:22

score 2 · Answer 3 · answered Sep 25 '19 at 00:01

2

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
}

answered Sep 25 '19 at 00:01

Badr Errami

136
3

I could not find any reference to `disableTimeOut` – Zaif Senpai Jun 02 '23 at 17:04

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

3 Answers3