Features - Tooltip, Alerts & BreadCrumbs
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:
- Information Alert
- Success Alert
- Warning Alert
- Danger Alert
To create a basic alert, simply wrap your content in an .alert class followed by the alert type class, like: .alert-info, .alert-success, .alert-warning and .alert-danger as follows:
<div class="clearfix alert alert-info">
<div aria-live="polite">
<p class="alertHeading">
<strong>INFO:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>Example - Info Alert:
INFO:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example - Success Alert:
Success: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example - Warning Alert:
WARNING:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example - Danger Alert:
DANGER:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dismissible Info Alert with Close Button:
<div class="clearfix alert alert-info alert-dismissable">
<button class="fa fa-times-circle fa-2x example">
<span class="adobeBlank" aria-hidden="true">Close icon</span>
<span class="sr-only">Close info alert message</span>
</button>
<div class="alertContent">
<p class="alertHeading">
<strong>INFO:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>Example - dismissible Warning alert:
WARNING:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success Alert with Icon & Close Button
<div class="clearfix alert alert-success">
<div class="iconSpan pull-left">
<em class="fa fa-check-circle fa-2x white"></em>
<span class="adobeBlank">Success icon</span>
</div>
<div class="alertContent">
<p class="alertHeading2">
<strong>SUCCESS:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<button class="fa fa-times-circle fa-2x example2 white">
<span class="adobeBlank" aria-hidden="true">Close icon</span>
<span class="sr-only">Close success alert message</span>
</button>
</div> INFO:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
SUCCESS:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
WARNING: Lorem Ipsum Dolor -it amet, consectetur dreamcatcher adipiscing elit. Etro deserunt mustache, marfa bicycle rights.
DANGER: Lorem Ipsum Dolor -it amet, consectetur dreamcatcher adipiscing elit. Etro deserunt mustache, marfa bicycle rights.
Responsive Breadcrumbs
The Breadcrumb Widget extends Bootstrap's breadcrumb component to be responsive while remaining simple to implement.
This demonstration presents breadcrumbs which will work with responsive views. The links are inoperable and are used to show keyboard access through tabbing.
This shows the HTML code for the breadcrumbs.
<ol class="breadcrumb">
<li>
<a href="javascript:void(0)" title="Home">Home</a>
</li>
<li>
<a href="javascript:void(0)" title="Link level 1">Link level 1</a>
</li>
<li>
<a href="javascript:void(0)" title="Link level 2">Link level 2</a>
</li>
<li>
<a href="javascript:void(0)" title="Link level 3">Link level 3</a>
</li>
<li class="active">
<!-- removing the link of the current page should be done to remove ability to focus -->
Link level 4
</li>
</ol>