<BitTooltip Text="This is the tooltip text">
    <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
</BitTooltip>

<BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Top">
    <BitButton Variant="BitVariant.Outline">Top</BitButton>
</BitTooltip>
<BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Right">
    <BitButton Variant="BitVariant.Outline">Right</BitButton>
</BitTooltip>
<BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Left">
    <BitButton Variant="BitVariant.Outline">Left</BitButton>
</BitTooltip>
<BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Bottom">
    <BitButton Variant="BitVariant.Outline">Bottom</BitButton>
</BitTooltip>

<BitTooltip>
    <Template>
        <ul style="padding: 0.5rem; margin: 0;">
            <li>1. One</li>
            <li>2. Two</li>
        </ul>
    </Template>
    <Anchor>
        <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
    </Anchor>
</BitTooltip>

<BitTooltip @bind-IsShown="isShown"
            Text="Text"
            HideArrow="hideArrow"
            HideDelay="(int)hideDelay"
            ShowOnClick="showOnClick"
            ShowOnHover="showOnHover"
            Position="tooltipPosition">
    <BitButton Variant="BitVariant.Outline">Anchor</BitButton>
</BitTooltip>

<BitDropdown Label="Tooltip positions" Items="tooltipPositionList" @bind-Value="tooltipPosition" />
<BitNumberField Label="Hide delay" @bind-Value="hideDelay" Mode="BitSpinButtonMode.Inline" />
<BitToggle @bind-Value="isShown" Text="Toggle tooltip state" />
<BitToggle @bind-Value="hideArrow" Text="Hide tooltip arrow" />
<BitToggle @bind-Value="showOnClick" Text="Show tooltip on click" />
<BitToggle @bind-Value="showOnHover" Text="Show tooltip on hover" />
@code {
    private bool isShown = true;
    private bool showOnClick = true;
    private bool showOnHover;
    private bool hideArrow;
    private double hideDelay = 800;
    
    private BitTooltipPosition tooltipPosition;
    
    private readonly List<BitDropdownItem<BitTooltipPosition>> tooltipPositionList = Enum.GetValues(typeof(BitTooltipPosition))
        .Cast<BitTooltipPosition>()
        .Select(enumValue => new BitDropdownItem<BitTooltipPosition>
        {
            Value = enumValue,
            Text = enumValue.ToString()
        })
        .ToList();
}
                    

<style>
    .custom-tooltip {
        color: tomato;
        border: solid tomato;
        border-radius: 0.5rem;
    }

    .custom-arrow {
        border-right: solid tomato;
        border-bottom: solid tomato;
    }
</style>


<BitTooltip Text="This is the tooltip text" Styles="@(new() { Tooltip = "box-shadow: aqua 0 0 0.5rem;" })">
    <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
</BitTooltip>

<BitTooltip Text="This is the tooltip text" Classes="@(new() { Tooltip = "custom-tooltip", Arrow = "custom-arrow" })">
    <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
</BitTooltip>

<BitTooltip Dir="BitDir.Rtl">
    <Template>
        <ul style="padding: 0.5rem; margin: 0;">
            <li>۱. یک</li>
            <li>۲. دو</li>
        </ul>
    </Template>
    <Anchor>
        <BitButton Variant="BitVariant.Outline">نشانگر ماوس را روی من بیاورید</BitButton>
    </Anchor>
</BitTooltip>