Tooltip - Fod.DemoPage

Basic Usage

Hover or focus on the elements below to see tooltips. Tooltips work with any content as their trigger.

Button trigger

Focus trigger

Text trigger

razor

<FodTooltip Title="This is a basic tooltip">
    <FodButton>Hover me</FodButton>
</FodTooltip>

<FodTooltip Title="Simple text trigger">
    <span style="text-decoration: underline; cursor: help;">What is this?</span>
</FodTooltip>

Placements

Tooltips can be positioned in 12 different locations relative to their trigger element.

Top Placements

Bottom Placements

Left Placements

Right Placements

razor

<FodTooltip Title="Top (default)" Placement="TooltipPlacement.Top">
    <FodButton>Top</FodButton>
</FodTooltip>

<FodTooltip Title="Bottom" Placement="TooltipPlacement.Bottom">
    <FodButton>Bottom</FodButton>
</FodTooltip>

<FodTooltip Title="Left" Placement="TooltipPlacement.Left">
    <FodButton>Left</FodButton>
</FodTooltip>

<FodTooltip Title="Right" Placement="TooltipPlacement.Right">
    <FodButton>Right</FodButton>
</FodTooltip>

Viewport Awareness (AutoFlip)

Tooltips automatically flip to the opposite side when approaching viewport edges. Set AutoFlip='true' to enable this behavior.

Flips to bottom near top edge

Flips to top near bottom edge

Flips to right near left edge

Flips to left near right edge

Comparison

CSS-only (default)

JS-based with flip

razor

<FodTooltip Title="Flips when near viewport edge"
            Placement="TooltipPlacement.Top"
            AutoFlip="true">
    <FodButton>AutoFlip Enabled</FodButton>
</FodTooltip>

Size Variants

Tooltips come in three sizes: Small, Medium (default), and Large.

Small tooltip

Medium (default)

Large tooltip

razor

<FodTooltip Title="Small" Size="TooltipSize.Small">
    <FodButton>Small</FodButton>
</FodTooltip>

<FodTooltip Title="Medium (default)">
    <FodButton>Medium</FodButton>
</FodTooltip>

<FodTooltip Title="Large" Size="TooltipSize.Large">
    <FodButton>Large</FodButton>
</FodTooltip>

Arrow Indicator

The arrow indicator can be shown or hidden to suit different design needs.

With arrow (default)

Without arrow

razor

<FodTooltip Title="With arrow" Arrow="true">
    <FodButton>With Arrow</FodButton>
</FodTooltip>

<FodTooltip Title="Without arrow" Arrow="false">
    <FodButton>No Arrow</FodButton>
</FodTooltip>

Rich Content

Tooltips can contain rich HTML content using the TooltipContent parameter for more complex information display.

Rich HTML content

Custom max-width

razor

<FodTooltip MaxWidth="400px">
    <ChildContent>
        <FodButton>Rich Content</FodButton>
    </ChildContent>
    <TooltipContent>
        <div>
            <strong>Title</strong>
            <p>Rich HTML content with custom width.</p>
        </div>
    </TooltipContent>
</FodTooltip>

Interactive Mode

Interactive tooltips allow users to hover over the tooltip content itself, useful when the tooltip contains clickable elements.

Can hover tooltip

Hides on mouse leave

razor

<FodTooltip Interactive="true">
    <ChildContent>
        <FodButton>Interactive</FodButton>
    </ChildContent>
    <TooltipContent>
        <p>Hover over this tooltip!</p>
        <a href="#">Clickable link</a>
    </TooltipContent>
</FodTooltip>

Timing Controls

Control when tooltips appear and disappear with delay settings for a customized user experience.

No delay (0ms)

Default (400ms)

Long delay (1s)

Slow hide (500ms)

razor

<FodTooltip Title="Instant" Delay="0">
    <FodButton>No Delay</FodButton>
</FodTooltip>

<FodTooltip Title="Long delay" Delay="1000">
    <FodButton>1s Delay</FodButton>
</FodTooltip>

<FodTooltip Title="Slow hide" LeaveDelay="500">
    <FodButton>500ms Leave</FodButton>
</FodTooltip>

Disabled State

Tooltips can be disabled programmatically, preventing them from appearing on hover or focus.

razor

<FodTooltip Title="Tooltip text" Disabled="@_isDisabled">
    <FodButton>Toggle Me</FodButton>
</FodTooltip>

@code {
    private bool _isDisabled;

    private void ToggleDisabled() => _isDisabled = !_isDisabled;
}

Events

Tooltips fire events when shown and hidden, allowing you to respond to visibility changes.

Event Log: No events yet

razor

<FodTooltip Title="Watch the log!"
            OnShow="HandleShow"
            OnHide="HandleHide">
    <FodButton>Hover for Events</FodButton>
</FodTooltip>

@code {
    private void HandleShow() => Console.WriteLine("Tooltip shown");
    private void HandleHide() => Console.WriteLine("Tooltip hidden");
}

RTL Support

Tooltips use CSS logical properties for proper RTL layout support.

This section has dir="rtl" - לקטע זה יש

Start/End placements automatically mirror for RTL languages using CSS logical properties.

Accessibility

FodTooltip follows the ARIA tooltip pattern for full screen reader and keyboard support.

Keyboard Navigation

Tab: Focus trigger to show tooltip immediately (ignores delay)
Escape: Dismiss visible tooltip

ARIA Attributes

role="tooltip": Applied to tooltip content for screen readers
aria-describedby: Links trigger to tooltip when visible
aria-hidden: Hides tooltip from screen readers when not visible
tabindex="0": Makes trigger focusable for keyboard access

Best Practices

No focus trap: Tooltip does not receive focus to maintain natural tab order
Immediate on focus: Keyboard users see tooltip immediately without delay
Escape dismissal: Users can always dismiss with keyboard

API Reference

FodTooltip component properties and their descriptions.

No properties defined.