Based on Bootstrap Popovers.
<abp-button abp-popover="Hi, i'm popover content!">
Popover Default
</abp-button>
<abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title">
Popover With Title
</abp-button>
<abp-button abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true">
Dismissible Popover
</abp-button>
<abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
Disabled Popover
</abp-button>
<button class="btn" type="button" data-busy-text="Processing..." data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Hi, i'm popover content!" data-bs-original-title="" title="">
Popover Default
</button>
<button title="" class="btn" type="button" data-busy-text="Processing..." data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Hi, i'm popover content!" data-bs-original-title="Popover Title">
Popover With Title
</button>
<button title="" class="btn" type="button" data-busy-text="Processing..." data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Hi, i'm popover content!" data-bs-trigger="focus" data-bs-original-title="Popover Title">
Dismissible Popover
</button>
<span class="d-inline-block" title="" data-bs-placement="left" data-bs-toggle="popover" data-bs-content="Hi, i'm popover content!" data-bs-original-title="Popover Title"><button title="Popover Title" class="btn" type="button" data-busy-text="Processing..." style="pointer-events: none;">
Disabled Popover
</button></span>