Explanation of the data-* HTML5 attributes

To make things more interesting, each div has a tooltip component so as to provide clues to what is happening with containers, when viewing the page in a browser.

The tooltip components are activated through the self-explanatory jQuery calls in step 4 of the recipe.

To make the tooltip components work, their specific options are set in HTML5 data-* attributes. The data-toggle attribute specifies that the component we are using is indeed a tooltip. The data-placement attribute can be set to the following four directions: top, right, bottom, or left. Setting the data-html attribute to "true" allows us to insert HTML inside our tooltip. As can be seen in the browser, this creates a pretty good effect.

The tooltip function in the custom script can be passed several parameters, as explained in the Bootstrap docs.