Popover

Link 

<a class="btn btn-primary rounded bs-popover  mb-2 me-4" data-bs-container="body" data-bs-content="Tooltip using ANCHOR tag">
    Link
</a>
<button type="button" class="btn btn-success rounded bs-popover mb-2" data-bs-container="body" data-bs-content="Tooltip using BUTTON tag">
    Button
</button>

Dismissible popover

Dismiss Me 

<a tabindex="0" class="btn btn-dark rounded bs-popover mb-3" data-bs-container="body" data-bs-trigger="focus" data-bs-placement="left" data-bs-content="Lorem ipsum dolor sit.">
    Popover on left
</a>

Placement

data-placement="top"

data-bs-placement="right"

data-bs-placement="bottom"

data-bs-placement="left"



<!-- data-bs-placement="top" -->

<button type="button" class="btn btn-info mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="top" data-bs-content="Tooltip on top">
    Popover on top
</button>


<!-- data-bs-placement="right" -->

<button type="button" class="btn btn-danger mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="right" data-bs-content="Tooltip on right">
    Popover on right
</button>


<!-- data-bs-placement="bottom" -->

<button type="button" class="btn btn-warning mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="bottom" data-bs-content="Tooltip on bottom">
    Popover on bottom
</button>


<!-- data-bs-placement="left" -->

<button type="button" class="btn btn-secondary mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="left" data-bs-content="Tooltip on left">
    Popover on left
</button>

Options

data-bs-trigger="hover"

Default

data-bs-delay="1000"

data-bs-animation="false"


    
<!-- data-bs-trigger="hover" -->

<button type="button" class="btn btn-primary bs-popover rounded" data-bs-container="body" data-bs-trigger="hover" data-bs-content="On Hover">
    On Hover
</button>

<!-- Default -->

<button type="button" class="btn btn-secondary bs-popover rounded" data-bs-container="body" data-bs-content="On Focus">
    On Focus
</button>


<!-- data-bs-delay="1000" -->

<button type="button" class="btn btn-info bs-popover rounded" data-bs-container="body" data-bs-delay="1000" data-bs-content="Delay 1s">
    Delay
</button>

<!-- data-bs-animation="false" -->

<button type="button" class="btn btn-dark bs-popover rounded" data-bs-container="body" data-bs-animation="false" data-bs-content="Disabled Animation">
    Disabled Animation
</button>

Colors

Change popover template html as shown below to add color scheme.


<button type="button" class="btn btn-primary btn-popover-primary  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Primary </button>
<button type="button" class="btn btn-success btn-popover-success  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Success </button>
<button type="button" class="btn btn-info btn-popover-info  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Info </button>
<button type="button" class="btn btn-danger btn-popover-danger  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Danger </button>
<button type="button" class="btn btn-warning btn-popover-warning  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Warning </button>
<button type="button" class="btn btn-secondary btn-popover-secondary  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Secondary </button>
<button type="button" class="btn btn-dark btn-popover-dark  mb-2 me-4 rounded" data-bs-container="body" data-html="true" data-placement="top"> Dark </button>

Copyright © 2026 DesignReset, All rights reserved.

Coded with