Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Popover

##### Basic Popover

Use common class `data-bs-toggle='popover'` and hover to use the `data-bs-trigger='hover'`attributes.

    <button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" data-bs-placement="left" title="Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Hurry Up!</button>
    <button class="example-popover btn btn-success mb-0 me-0" type="button" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Hover Popover" data-offset="-20px -20px" data-bs-content=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.">Hover Tooltip</button>

##### Disabled Elements

Use`data-bs-toggle="*"` to set disabled popover.

    <div class="card-body common-flex popover-wrapper">
     <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" title="Disable Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
         <button class="btn btn-primary" type="button" disabled="">Disabled Button</button>
     </span>
    </div>

##### Delay Popover

Use`data-bs-delay="{value}"` to set delay popover.

    <button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-delay="{"show":1500,"hide":1800}" data-bs-content="And here's some amazing content. It's very engaging. Right?">Delay Popover</button>

##### Dismiss Popover

Use`data-bs-dismiss='*'` to set dismiss popover.

Dismissible Popover

    <a class="btn btn-danger popover-dismiss" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible Popover" data-bs-title="Dismissible Popover" data-bs-dismiss="true" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible Popover</a>

##### Popover Directions

Use`data-bs-placement='*'` [top/left/bottom/top] to change directions.

    <button class="example-popover btn btn-warning mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="Popovers need the tooltip plugin considering that a dependency.">Popover on Top</button>
    <button class="example-popover btn btn-danger mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="right" title="Right Popover" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.">Popover on Right</button>
    <button class="example-popover btn btn-info mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Bottom Popover" data-bs-content="Identify container:to evade rendering problems in more complex components (like Bootstrap input groups, button groups, etc).">Popover on Bottom</button>
    <button class="example-popover btn btn-dark mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Left Popover" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.">Popover on Left</button>

##### Popover Offsets

Use`data-bs-offset="*,*"` through set popover offset.

    <button class="btn btn-secondary mb-0 me-0" type="button" data-bs-offset="50,0" data-bs-toggle="popover" data-bs-delay-show="5000" title="Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-kt-initialized="1">Popover Offset 50</button>
    <button class="example-popover btn btn-dark mb-0 me-0" type="button" data-bs-offset="-50,0" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Popover Title" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.">Popover Offset -50</button>