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

<h2>Tooltips</h2>

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

<h4># Tooltips Examples</h4>

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

        <abp-button abp-tooltip="Tooltip Default">
            Tooltip Default
        </abp-button>
        <abp-button abp-tooltip-top="Tooltip on top">
            Tooltip on top
        </abp-button>
        <abp-button abp-tooltip-right="Tooltip on right">
            Tooltip on right
        </abp-button>
        <abp-button abp-tooltip-bottom="Tooltip on bottom">
            Tooltip on bottom
        </abp-button>
        <abp-button abp-tooltip-left="Tooltip on left">
            Tooltip on left
        </abp-button>

    </div>
    <div class="code-area">
        <pre>
&lt;abp-button  abp-tooltip=&quot;Tooltip Default&quot;&gt;
  Tooltip Default
&lt;/abp-button&gt;
&lt;abp-button abp-tooltip-top=&quot;Tooltip on top&quot;&gt;
   Tooltip on top
&lt;/abp-button&gt;
&lt;abp-button abp-tooltip-right=&quot;Tooltip on right&quot;&gt;
  Tooltip on right
&lt;/abp-button&gt;
&lt;abp-button abp-tooltip-bottom=&quot;Tooltip on bottom&quot;&gt;
  Tooltip on bottom
&lt;/abp-button&gt;
&lt;abp-button abp-tooltip-left=&quot;Tooltip on left&quot;&gt;
  Tooltip on left
&lt;/abp-button&gt;
</pre>
    </div>
</div>