Table of Contents

Class TwTooltip

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Wraps any content and shows a short description in a popover-styled bubble when that content is hovered or keyboard-focused. On a touch screen a tap shows it and a tap anywhere else hides it.

public class TwTooltip : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwTooltip
Implements
Inherited Members

Remarks

The bubble is a role="tooltip" element linked to the wrapper via aria-describedby. It stays visible while the pointer moves onto it (hoverable), can be dismissed with Escape without moving focus (dismissible), and remains until the user leaves or dismisses it (persistent), matching WCAG 1.4.13. Because a tooltip only supplements the accessible name, it must never be the sole source of essential information, and it must not contain interactive content. To describe a button or icon button, prefer the Tooltip parameter on TwButton or TwIcon, which links the tooltip to the control itself.

Constructors

TwTooltip() 

public TwTooltip()

Properties

Arrow

Gets or sets whether the bubble shows a small arrow pointing at the content.

[Parameter]
public bool Arrow { get; set; }

Property Value

bool

Remarks

Default is false. The arrow is decorative and hidden from assistive technology.

ChildContent

Gets or sets the content the tooltip describes.

[Parameter]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Disabled

Gets or sets whether the tooltip is turned off. The content still renders, but without a bubble.

[Parameter]
public bool Disabled { get; set; }

Property Value

bool

Focusable

Gets or sets whether the wrapper itself is added to the tab order so keyboard users can reveal the tooltip.

[Parameter]
public bool Focusable { get; set; }

Property Value

bool

Remarks

Default is true, which is needed when the content is not already focusable (for example a paragraph or an abbreviation). Set to false when the content contains its own focusable control, to avoid a duplicate tab stop; the tooltip still appears when that control gains focus.

Placement

Gets or sets which side of the content the bubble appears on.

[Parameter]
public TooltipPlacement Placement { get; set; }

Property Value

TooltipPlacement

Remarks

Default is Top.

Text

Gets or sets the plain text shown in the tooltip bubble.

[Parameter]
public string? Text { get; set; }

Property Value

string

Remarks

Ignored when TooltipContent is set. When both are empty no bubble is rendered.

TooltipClass

Gets or sets additional classes applied to the tooltip bubble (as opposed to Class, which is applied to the wrapper).

[Parameter]
public string? TooltipClass { get; set; }

Property Value

string

TooltipContent

Gets or sets rich (non-interactive) content shown in the tooltip bubble instead of Text.

[Parameter]
public RenderFragment? TooltipContent { get; set; }

Property Value

RenderFragment

TooltipStyle

Gets or sets inline styles applied to the tooltip bubble (as opposed to Style, which is applied to the wrapper), for example to place the bubble somewhere other than the middle of the content.

[Parameter]
public string? TooltipStyle { get; set; }

Property Value

string

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

Edit this page