Tooltip

The jQuery UI Tooltip Widget allows hints to be displayed to the user when the interface element receives mouse cursor hover or keyboard focus.

This demo uses positioning and an arrow to set the location of the tooltip.



This demo use the <a> element with text.

This demo is an example of the <input> element with the title attribute.



Alerts

Alerts are used to provide important information, but they do not require user interaction. Each alert type also uses a saturated color to grab attention for sighted users and include an icon or text redundancy for blind/colorblind users. It is possible to customize each alert to be dismissable. There are four types of alerts:

The template uses the Alert Widget from Bootstrap 4. Full documentation is available here: Alerts in Bootstrap 4This link opens a new window or tab

Alert Types


<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Dissmissable Alerts

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>


Responsive Breadcrumbs

The template uses the Breadcrumb Widget from Bootstrap 4. Full documentation is available here: Breadcrumbs in Bootstrap 4This link opens a new window or tab
Note: take note of the "Acccessibility" note in the link.

This shows the HTML code for the breadcrumbs:


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>