smootify-toasts
Short messages (toasts) when something happens on the page: an add to cart, a change the cart refused, a wishlist toggle, a Smootify form sent, a link copied; one clone of its [toast="…"] template per toast (no template, no toast; §2.14). Once per page, usually in a global component; shown in the top layer (a manual popover) above drawers and dialogs, placed by its class (bottom right until then) (2.0).
Where it can go
- Anywhere on the page.
- Must contain
[toast]. - Out of place, it stays in the page and does nothing: without a [toast] template.
What it requires
Nothing beyond Smootify: it works on every plan.
Attributes on the element
- It reads
data-duration,data-max. - Smootify writes
popover="manual",aria-live="polite"on it: do not set them yourself.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Toasts | toast | 7 |
| Toast content | toast-item | 7 |
| Toast buttons | data-action | 2 |
Loading
Its code loads only on pages that have smootify-toasts.