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

Hover me

Focus trigger

Focus me

Text trigger

What is this?

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

Top

Top Start

Top End

Bottom Placements

Bottom

Bottom Start

Bottom End

Left Placements

Left

Left Start

Left End

Right Placements

Right

Right Start

Right End

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

Top (flips)

Flips to top near bottom edge

Bottom (flips)

Flips to right near left edge

Left (flips)

Flips to left near right edge

Right (flips)

Comparison

CSS-only (default)

AutoFlip Disabled

JS-based with flip

AutoFlip Enabled

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

Small

Medium (default)

Medium

Large tooltip

Large

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)

With Arrow

Without arrow

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

Rich Content

Custom max-width

Wide Tooltip

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

Interactive

Hides on mouse leave

Non-Interactive

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)

No Delay

Default (400ms)

Default Delay

Long delay (1s)

Long Delay

Slow hide (500ms)

Slow Hide

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.

Tooltip Enabled

Toggle Disabled

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.

Hover for Events

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

Keyboard Accessible

API Reference

FodTooltip component properties and their descriptions.

No properties defined.