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.

[alert class=»alert-success»]Well done! You successfully read this important alert message.[/alert]

[alert class=»alert-info»]Heads up! This alert needs your attention, but it’s not super important.[/alert]

[alert class=»alert-warning»]Warning! Best check yo self, you’re not looking too good.[/alert]

[alert class=»alert-danger»]Oh snap! Change a few things up and try submitting again.[/alert]