Default popovers

Use the data-placement attribute to position the popover on top, bottom, left or right.

Custom popovers using primary colors

Use the data-container="body" data-toggle="popover-primary" attribute to trigger popovers with the primary color.

Custom popovers using secondary colors

Use the data-container="body" data-toggle="popover-secondary" attribute to trigger popovers with the secondary color.

Custom popovers using info colors

Use the data-container="body" data-toggle="popover-info" attribute to trigger popovers with the info color.

Custom popovers using success colors

Use the data-container="body" data-toggle="popover-success" attribute to trigger popovers with the success color.

Custom popovers using warning colors

Use the data-container="body" data-toggle="popover-warning" attribute to trigger popovers with the warning color.

Custom popovers using danger colors

Use the data-container="body" data-toggle="popover-danger" attribute to trigger popovers with the danger color.