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]