Close button for sticky toasts? #35

rderharo opened this Issue Dec 24, 2012 · 11 comments


None yet

3 participants

I've implemented toastr on a website but I'm finding that more than a few users are confused about how to close the toasts that do not disappear on their own.

I initialize them as such: {timeOut: 0, extendedTimeOut: 0} and while it works fine functionally, it doesn't convey to the user how to dismiss the toast.

So I was wondering if there could also be an option to show a small 'X' close button/text in the top right corner of the toast to help make it obvious that they have to click to close it?

I've implemented a solution that by setting options.closeButton=true the tooltip show a default close button. The implementation provide also to pass a jquery button to options.closeButton.
In a few day I try to pull the request

Oh, interesting. I'll keep an eye out for that, thanks!

@rderharo I've pulled a request for default close button; see the changes at #36
here the demo:

Hey @joeyramone76. I just took a look and it looks good! I guess I just have some comments about it if you're interested...

  1. When the title text is too long, the button gets pushed down to the second line, putting it under the title text and in an odd place.
  2. Also, I noticed that you have the code that makes the toastr sticky if a button is showing. I think that shouldn't be the default behaviour since the intention of the button is to simply imply to the user what they need to do to dismiss a toast if it is already sticky since both non-sticky and sticky toasts can be dismissed with a click anyway.
  3. My original idea was to merely add an image or text ('x') instead of an actual button or link. Is the <a> element merely used to allow support for jQuery buttons? Or is even the default button behaving as a link?

Hey @rderharo great feedback!

I solved point 1 (now I always prepend the closeButton to $toastElement) and point 2 (now I don't set the toasrt sticky if close button is required).
For point 3 I not sure to understand your question: now I change the link with span and set title attribute (with jquery) to show the tip when mouseover but you can use only text I suppose.

I'm updated github repos and online demo. Try it and send your feedback


I love the ideas, but I don't think we want to add this to the core of toastr. It is more of a customization, IMO, and we want to keep the core features very tight (the library has already doubled in LOC).

However, if there was a simple X button to close that was an option, likely written with CSS, I'd be very open to pulling that in if any of you wants to code that. I'll keep this open for now in case someone wants to give that a go. If not, I'll close it out if there is no interest in it.

@johnpapa johnpapa was assigned Dec 28, 2012

To be honest, a simple CSS based X button was all I was suggesting anyway. If you can leave this open for a bit I can try to take a shot at it myself or if @joeyramone76 wants to modify his code that can work too because I think the only part of his code that becomes more customization based is the jQuery button feature, so if it's brought down to just the button option and a CSS based X button then it might work out.

@johnpapa @rderharo I try to code a simple CSS close button solution, in the next days.

Hi @joeyramone76 any luck on the CSS close button solution?

@rderharo sorry but I've been busy on a project, but as soon as possible I return to work on the CSS close button

@joeyramone76 Oh alright, no problem. Thanks for the reply.

This was referenced Feb 18, 2013
@craigteegarden craigteegarden added a commit to craigteegarden/toastr that referenced this issue Jul 22, 2013
@craigteegarden craigteegarden add a simple css close button, closes #35 1343453
@craigteegarden craigteegarden added a commit to craigteegarden/toastr that referenced this issue Jul 22, 2013
@craigteegarden craigteegarden add a simple css close button, closes #35 2b41845
@johnpapa johnpapa closed this in fb34ff9 Aug 30, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment