Other text styles

Tooltips

Hover over the links below to see tooltips:

Phasellus [tooltip pos=”top” toolt=”First tooltip”]molestie magna[/tooltip] non est bibendum non venenatis nisl tempor. [tooltip pos=”top” toolt=”Second tooltip”]Suspendisse[/tooltip] dictum feugiat nisl ut dapibus. Mauris iaculis [tooltip pos=”top” toolt=”Another example of Tooltip with more text in it”]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.

Tooltips can be set in 4 directions

[tooltip pos=”top” toolt=”Tooltip on Top”]Tooltip on Top[/tooltip]   |   [tooltip pos=”bottom” toolt=”Tooltip on Bottom”]Tooltip on Bottom[/tooltip]   |   [tooltip pos=”right” toolt=”Tooltip on Right”]Tooltip on Right[/tooltip]   |   [tooltip pos=”left” toolt=”Tooltip on Left”]Tooltip on Left[/tooltip]

Labels

Default Primary Success Info Warning Danger

Add any of the below mentioned modifier classes to change the appearance of a label.

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

You can even make them smaller:

Example heading label-sm New

Example heading label-xs NEW

Alert messages

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages with dismiss functionality.

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.×