Toast (Bootstrap)

Description

Use the Toast control to display a combination of text and images. Since all the fields are optional, there are a lot of different ways to display data using this control.

It can also act as a container for child controls. In the example above, the Button is a child which has been added to the Toast.

Properties and Methods

Standard properties are supported, plus:

animation	Should the Toast show and hide with an animation?
autohide	Should the Toast close automatically once opened?
delay	If autohide, how long should the Toast display?
image	Optional. A 16x16 image. src, class, style, height and width can be specified.
subtitle	Optional. The text to the right of the title. Class, style and value can be specified.
text	Optional. The text under the title. HTML is OK. Class, style and value can be specified.
title	Optional. The text to the right of the image. Class, style and value can be specified.

Events

Standard events are supported.

Examples

BASIC

Function Button1_onclick()
  $("#Toast1").toast("show")
End Function

Function Button3_onclick()
  Toast3_title.innerText = "Custom title"
  Toast3_subtitle.innerText = "Custom Subtitle"
  Toast3_text.innerHTML = "Text <b>can</b> include HTML styling and be <br> more than one line."
  $("#Toast3").toast("show")
End Function

JavaScript

Button1.onclick = function() {
  $("#Toast1").toast("show");
};

Button3.onclick = function() {
  Toast3_title.innerText = "Custom title";
  Toast3_subtitle.innerText = "Custom Subtitle";
  Toast3_text.innerHTML = "Text <b>can</b> include HTML styling and be <br> more than one line.";
  $("#Toast3").toast("show");
};