Bubble notifications

Bubble notifications is a JavaScript system developed as part of MediaWiki for displaying notifications on a web page.

An example of a bubble notification

Features

• Multiple notifications: It can display multiple notifications at the same time. Each can be closed independently.
• Automatic closing: A notification can be configured to automatically close after a short period of time. This is enabled by default, but individual features using this system may choose to disable it for specific notifications where needed.
• Tagging: A notification can optionally be given a name (or "tag"). When a new notification is created with the same name as an older one that is still active, the older one is replaced with the new one. This enables an improved user experience where one would otherwise cause old, incomplete, or duplicate notifications to be visible (example use cases)

API

The entry point for the bubble notifications is the mw.notify() method. Some examples:

mw.notify( 'This is a notification.' ); // Send a plaintext notification
mw.notify( mw.message( 'some-message' ) ); // Use an i18n message to send a notification
mw.notify( $( '<span>This is an <u>HTML</u> notification.</span>' ) ); // Send an HTML notification with a jQuery instance (a DOM node also works)

mw.notify( 'Test', { title: 'Title!' } ); // Give the notification a title
mw.notify( 'Test', { autoHide: false } ); // Don't automatically hide the notification
mw.notify( 'Test', { tag: 'foobar' } ); // Send a notification tagged with a tag
mw.notify( 'Test 2', { tag: 'foobar' } ); // This one will replace the previous 'foobar' notification.

The format is: mw.notify(message, options), available options are:

• autoHide – A boolean indicating whether the notification should automatically be hidden after shown or if it should persist.
• autoHideSeconds – Number of seconds for timeout of auto-hide notifications.
• tag – An optional string. When a notification is tagged only one message with that tag will be displayed. Trying to display a new notification with the same tag as one already being displayed will cause the other notification to be closed and this new notification to open up inside the same place as the previous notification.
• title – An optional title for the notification. Will be displayed above the content, usually in bold.
• type – An optional string for the type of the message used for styling: Examples: 'info', 'warn', 'error', 'success'.
• visibleTimeout – A boolean indicating if the autoHide timeout should be based on time the page was visible to user or if it should use wall clock time.

See also

• API Documentation: mw.notify

Code stewardship

• Maintained by Unknown or Unassigned^{[‍Maintainers page]}.
• Issue tracker: Phabricator MediaWiki-Interface (Report an issue)