Tooltips & Alerts

Tooltips

Lorem ipsum dolor sit amet, tooltip here consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus tooltip here luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<p>
    Lorem ipsum dolor sit amet, <a rel="tooltip" href="#" data-original-title="Default tooltip">
        tooltip here</a> consectetur adipiscing elit. Curabitur pellentesque neque eget
    diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing
    porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus
    ornare vel id metus. Vestibulum ante ipsum primis in faucibus <a rel="tooltip" href="#"
        data-original-title="Default tooltip">tooltip here</a> luctus et ultrices posuere
    cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque
    eget diam posuere porta.</p>

Alerts

Styles for success, info, warning, and error messages

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="alert alert-success">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>