@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.PopoversModel
@{
    ViewData["Title"] = "Badges";
}

<h2>Popovers</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/Popovers/" target="_blank"> Bootstrap Popovers</a>.</p>

<h4># Popovers Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">

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

    </div>
    <div class="code-area">
        <pre>
&lt;abp-button abp-popover=&quot;Hi, i&#39;m popover content!&quot;&gt;
   Popover Default
&lt;/abp-button&gt;
&lt;abp-button abp-popover-top=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot;&gt;
   Popover With Title
&lt;/abp-button&gt;
&lt;abp-button abp-popover-right=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; dismissible=&quot;true&quot;&gt;
   Dismissible Popover
&lt;/abp-button&gt;
&lt;abp-button abp-popover-left=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; disabled=&quot;true&quot;&gt;
   Disabled Popover
&lt;/abp-button&gt;
</pre>
    </div>
</div>