Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Link color

Additional content

Dismissible

Callout

Provide contextual feedback messages for typical user actions with the handful of available and flexible callout messages.

Basic

Dismissable

Tooltip

Display a secondary information on an element on hover.

Examples

Basic

Provide tooltip for an element by adding data-provide="tooltip" to it.


Colors

Change tooltip color using data-tooltip-color="*" which * is any color name.

Static view

Default tooltip
Primary tooltip
Secondary tooltip
Success tooltip
Info tooltip
Warning tooltip
Danger tooltip
Purple tooltip
Pink tooltip
Cyan tooltip
Yellow tooltip
Brown tooltip
Dark tooltip
Light tooltip
Popover

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Examples

Basic

Provide popover for an element by adding data-provide="popover" to it.


Dismiss on next click

Use data-trigger="focus" to dismiss popovers on the next click that the user makes.

Static view

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Toast

Inspired by Google's material design, you are able to display a toast after performing an action by user.

Text only
JavaScript
$('button').on('click', function(){
  app.toast('A basic toast using Javascript. It stays for 4 seconds.');
});
Duration set to 7 sec. Default is 4 sec
JavaScript
$('button').on('click', function(){
  app.toast('This toast stays for 7 seconds.', {
    duration: 7000
  });
});
Action button
JavaScript
$('button').on('click', function(){
  app.toast('Including an action button with link.', {
    actionTitle: 'Retry',
    actionUrl: 'something'
  });
});
Danger action button
JavaScript
$('button').on('click', function(){
  app.toast('Including a danger action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'danger'
  });
});
Success action button
JavaScript
$('button').on('click', function(){
  app.toast('Including a success action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'success'
  });
});
Basic data-attribute
Markup
<button class="btn btn-primary" data-provide="toast" data-text="This content is from data attribute." data-action-title="Retry" data-action-color="purple">Basic data-attribute</button>

Documentation

Usage

Trigger the toast via JavaScript:

JavaScript
app.toast(text, options)

Trigger the toast via data-attribute when user click on the element:

Markup
<button data-provide="toast" data-text="Sample text." data-duration="3000">Toast it</button>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-duration="4000" or data-action-title="Undo".

Name Type Default Description
duration Number 4000 How long the toast should be visible (ms).
actionTitle String null The text for action button.
actionUrl String null The link for action button.
actionColor String 'warning' The color of action button. It could be any string that can attach to .text-* utility class.
Push

Send push notifications to a user's desktop browser with ease.
Official documentation

Push

Send push notifications to a user's desktop browser with ease. Click the following button to see what push can do for you.

JavaScript
Push.create("Message from Hossein", {
  body: "Come and join us for weekend party.",
  icon: '../assets/images/icon/push-icon.png',
  timeout: 4000,
  onClick: function () {
    window.focus();
    this.close();
  }
});