@page "/tooltip"
@inject IStringLocalizer<Tooltips> Localizer

<h3>@Localizer["TooltipsTitle"]</h3>
<h4>@Localizer["TooltipsDescription"]</h4>

<DemoBlock Title="@Localizer["TooltipsNormalTitle"]"
           Introduction="@Localizer["TooltipsNormalIntro"]"
           Name="Normal">
    <div class="d-flex flex-column w-100 tooltip-demo">
        <div class="d-flex justify-content-center">
            <Tooltip Placement="Placement.Bottom" Title="Tooltip">
                <BootstrapInput Value="@BottomString" aria-label="@BottomString" />
            </Tooltip>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <Tooltip Placement="Placement.Right" Title="Tooltip">
                <BootstrapInput Value="@RightString" aria-label="@RightString" />
            </Tooltip>
            <Tooltip Placement="Placement.Left" Title="Tooltip">
                <BootstrapInput Value="@LeftString" aria-label="@LeftString" />
            </Tooltip>
        </div>
        <div class="d-flex justify-content-center">
            <Tooltip Placement="Placement.Top" Title="Tooltip">
                <BootstrapInput Value="@TopString" aria-label="@TopString" />
            </Tooltip>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["TooltipsButtonTitle"]"
           Introduction="@Localizer["TooltipsButtonIntro"]"
           Name="Button">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Top" Title="Tooltip" Trigger="click">
                <Button Text="@TopString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Left" Title="Tooltip" Trigger="click">
                <Button Text="@LeftString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Bottom" Title="Tooltip" Trigger="click">
                <Button Text="@BottomString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Right" Title="Tooltip" Trigger="click">
                <Button Text="@RightString" />
            </Tooltip>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["BootstrapTooltipTitle"]"
           Introduction="@Localizer["BootstrapTooltipIntro"]"
           Name="BootstrapTooltip">
    <p>@((MarkupString)Localizer["BootstrapTooltipTips1"].Value)</p>
    <p>@((MarkupString)Localizer["BootstrapTooltipTips2"].Value)</p>
    <Pre class="mb-3">&lt;BootstrapTooltip Title="Test tooltip"&gt;
    &lt;i class="fa-solid fa-flag" /&gt;
&lt;/BootstrapTooltip&gt;</Pre>
    <Tooltip Title="Test tooltip">
        <i class="fa-solid fa-flag" />
    </Tooltip>
</DemoBlock>

<DemoBlock Title="@Localizer["TooltipsSelectorTitle"]"
           Introduction="@Localizer["TooltipsSelectorIntro"]"
           Name="Selector">
    <Tooltip Title="@HtmlString" IsHtml="true" Sanitize="false" Selector=".tooltip-selector">
        <div>
            <i class="fa-solid fa-flag" />
            <span class="tooltip-selector ms-2">This is Tooltip</span>
        </div>
    </Tooltip>
</DemoBlock>

<DemoBlock Title="@Localizer["TooltipsCustomClassTitle"]"
           Introduction="@Localizer["TooltipsCustomClassIntro"]"
           Name="CustomClass">
    <Tooltip Title="Test tooltip" CustomClass="is-invalid">
        <i class="fa-solid fa-flag" />
    </Tooltip>
</DemoBlock>

<DemoBlock Title="@Localizer["TooltipsManualTitle"]"
           Introduction="@Localizer["TooltipsManualIntro"]"
           Name="Manual">
    <section ignore>
        <ul class="ul-demo">
            <li>@((MarkupString)Localizer["TooltipsManualDescLI1"].Value)</li>
            <li>@((MarkupString)Localizer["TooltipsManualDescLI2"].Value)</li>
        </ul>
    </section>
    <Tooltip Title="Manual trigger tooltip" Trigger="manual" @ref="_tooltip">
        <TooltipContent></TooltipContent>
    </Tooltip>
    <Button Text="Trigger" OnClickWithoutRender="ToggleShow"></Button>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
