Boxed layout options
Boxed layout backgrounds
Color schemes

More color schemes will be available soon!

Popovers Popovers are extended tooltips that can be attached to any element and can contain more informations than a regular tooltip.

Inline popovers

Popovers can be created on all elements (buttons, tables, links, badges, etc). Popovers can have the following positions: top, right, bottom and left.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Alternate styles

You can remove the box shadow bt adding the no-shadow core helper class. The popover title is automatically removed if the .popover-title element is empty.

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Positions

You can change the default tooltip position for an element either by adding data-placement="" attribute to the respective element or by setting the placement: parameter in the tooltip js function.

Popover triggers

You can select the action that trigger the popover either by adding data-trigger="" attribute to the respective element or by setting the trigger: parameter in the tooltip js function. Available triggers: click, hover, focus, manual

Data content

Content can be added using the data-content attribute in which case you have to write all the content in the attribute or by using the data-id attribute which should point to a hidden element with the popover content. You can also specify the content in the js function that creates the popover using the content: parameter.