Popovers

Popover Positions

Four options are available: top, right, bottom, and left aligned.

Basic Top Popover

Add data-toggle="popover" & data-placement="top" to add top popover.

Basic Right Popover

Add data-toggle="popover" & data-placement="right" to add right popover.

Basic Bottom Popover

Add data-toggle="popover" & data-placement="bottom" to add bottom popover.

Basic Left Popover

Add data-toggle="popover" & data-placement="left" to add left popover.

Popover Options

Disabled Animaition

Use data-animation="false" to remove fade animation. Default is true.

Delay Show/Hide

Delay showing and hiding the popover (ms) - does not apply to manual trigger type.

Supports HTML

Use data-html="true" for HTML supported trigger.

Popover Template

Base HTML to use when creating the popover. The popover's title will be injected into the .popover-inner. .arrow will become the popover's arrow.The outermost wrapper element should have the .popover class.

Popover Methods

This is considered a “manual” triggering of the popover.Popovers whose both title and content are zero-length are never displayed.

Show

Reveals an element’s popover. Returns to the caller before the popover has actually been shown.(i.e. before the shown.bs.popover event occurs)

Hide

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs).

Toggle

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs).

Dispose

Hides and destroys an element’s popover. Popovers that use delegation cannot be individually destroyed on descendant trigger elements.

Popover Events

Show Event

This event fires immediately when the show instance method is called.

Shown Event

This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).

Hide Event

This event is fired immediately when the hide instance method has been called.

Hidden Event

This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

Popover Triggers

Popover is triggered using - click | hover | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.

Hover

Use data-trigger="hover" for hover trigger.

Click

Use data-trigger="click" for click trigger. This is a default trigger.

Focus

Use data-trigger="focus" for focus trigger.

Manual

Use data-trigger="manual" for manual trigger. You can do show/hide using js

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder