Popover

Basic Popover

Use the 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 the data-bs-toggle="*" through 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 the data-bs-delay="{value}" through 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 the data-bs-dismiss='*' through 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 Direction

Use the 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 Offset

Use the 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>