[title type=”h1″ class=””]Shortcodes: Other text styles[/title]
[title type=”h2″ class=””]Tooltips[/title]
Hover over the links below to see tooltips:
Phasellus [tooltip title=”First tooltip” url=”#” position=”bottom”]molestie magna[/tooltip] non est bibendum non venenatis nisl tempor. [tooltip title=”Second tooltip” url=”#” position=”bottom”]Suspendisse[/tooltip] dictum feugiat nisl ut dapibus. Mauris iaculis [tooltip title=”Another example of Tooltip with more text in it” url=”#” position=”bottom”]porttitor posuere[/tooltip]. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
[title type=”h3″ class=””]Tooltips can be set in 4 directions[/title]
[raw]
[tooltip title=”Tooltip on Top” url=”#” position=”top”]Tooltip on Top[/tooltip] |
[tooltip title=”Tooltip on Bottom” url=”#” position=”bottom”]Tooltip on Bottom[/tooltip] |
[tooltip title=”Tooltip on Right” url=”#” position=”right”]Tooltip on Right[/tooltip] |
[tooltip title=”Tooltip on left” url=”#” position=”left”]Tooltip on left[/tooltip]
[/raw]
[title type=”h2″ class=””]Labels[/title]
[raw]
[label class=””]Default[/label]
[label class=”label-primary”]Primary[/label]
[label class=”label-success”]Success[/label]
[label class=”label-info”]Info[/label]
[label class=”label-warning”]Warning[/label]
[label class=”label-danger”]Danger[/label]
[/raw]
Add any of the below mentioned modifier classes to change the appearance of a label.
[title type=”h2″ class=””]Example heading [label class=””]New[/label][/title]
[title type=”h3″ class=””]Example heading [label class=”label-primary”]New[/label][/title]
[title type=”h4″ class=””]Example heading [label class=”label-warning”]New[/label][/title]
[title type=”h5″ class=””]Example heading [label class=”label-info”]New[/label][/title]
[title type=”h6″ class=””]Example heading [label class=”label-danger”]New[/label][/title]
You can even make them smaller:
[title type=”h4″ class=””]Example heading label-sm [label class=”label-info label-sm”]New[/label][/title]
[title type=”h4″ class=””]Example heading label-xs [label class=”label-warning label-xs”]New[/label][/title]
[title type=”h2″ class=””]Alert messages[/title]
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages with dismiss functionality
.
[styled_box title=”” type=”alert” class=”alert-success”]Well done! You successfully read this important alert message.[/styled_box]
[styled_box title=”” type=”alert” class=”alert-info”]Heads up! This alert needs your attention, but it’s not super important.[/styled_box]
[styled_box title=”” type=”alert” class=”alert-warning”]Warning! Best check yo self, you’re not looking too good.[/styled_box]
[styled_box title=”” type=”alert” class=”alert-danger”]Oh snap! Change a few things up and try submitting again.[/styled_box]