Class SliderTooltip

Represents a tooltip component for the Slider control that provides contextual information and value formatting for slider handles.

Inheritance

System.Object

SliderTooltip

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SliderTooltip : OwningComponentBase

Remarks

The SliderTooltip class enables you to display tooltips on slider handles, showing current values and providing visual feedback to users. It supports customization through CSS classes, value formatting, positioning, and visibility control. The tooltip can be configured to appear on different events such as hover or touch interactions based on the device type.

Examples

A simple Slider with tooltip configuration.

<SfSlider TValue="int" Value="30" Min="0" Max="100">
    <SliderTooltip IsVisible="true" Format="N0" Placement="TooltipPlacement.Before" ShowOn="TooltipShowOn.Auto" />
</SfSlider>

Constructors

SliderTooltip()

Declaration

public SliderTooltip()

Properties

CssClass

Gets or sets the CSS class names to customize the appearance and styling of the tooltip element.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A `string` containing space-separated CSS class names that define custom styles and themes for the tooltip element. The default value is `string.Empty`.

Remarks

This property allows you to apply custom CSS classes to modify the visual appearance of the tooltip. You can use this to change colors, fonts, borders, shadows, and other visual aspects of the tooltip to match your application's design theme. Multiple CSS classes can be applied by separating them with spaces.

Format

Gets or sets the format string used to customize the display of tooltip content.

Declaration

public string Format { get; set; }

Property Value

Type	Description
System.String	A `string` that specifies the format pattern for displaying the slider value in the tooltip. The default value is `null`.

Remarks

This property supports standard .NET format strings to control how the slider value is displayed in the tooltip. For example, use "N2" for numeric formatting with two decimal places, "C" for currency formatting, or "P" for percentage formatting. When set to null, the tooltip displays the raw value without any specific formatting. This property is particularly useful for internationalization scenarios where different locales require different number formatting.

IsVisible

Gets or sets a value indicating whether the tooltip is visible when interacting with the slider.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines the visibility of the tooltip. `true` to show the tooltip; `false` to hide it. The default value is `false`.

Remarks

This property controls the global visibility of the tooltip for the slider component. When set to true, the tooltip will appear based on the configured ShowOn behavior. When set to false, the tooltip will remain hidden regardless of user interactions. This is useful for dynamically controlling tooltip visibility based on application state or user preferences.

Placement

Gets or sets the position where the tooltip appears relative to the slider handle.

Declaration

public TooltipPlacement Placement { get; set; }

Property Value

Type	Description
TooltipPlacement	A TooltipPlacement enumeration value that specifies the tooltip position. The default value is the default TooltipPlacement value.

Remarks

This property determines the placement of the tooltip relative to the slider handle:

Before - Tooltip appears above the horizontal slider bar or to the left of the vertical slider bar
After - Tooltip appears below the horizontal slider bar or to the right of the vertical slider bar

The tooltip position automatically adjusts based on the slider's orientation (horizontal or vertical) to provide optimal visibility and user experience.

ShowOn

Gets or sets the interaction mode that determines when the tooltip should be displayed.

Declaration

public TooltipShowOn ShowOn { get; set; }

Property Value

Type	Description
TooltipShowOn	A TooltipShowOn enumeration value that specifies the tooltip display trigger. The default value is Auto.

Remarks

This property controls how the tooltip responds to user interactions based on the device type:

Auto - Automatically detects device type and shows tooltip on hover for desktop and tap-hold for touch devices
Hover - Shows tooltip when hovering over the slider handle (desktop behavior)
Click - Shows tooltip when clicking on the slider handle
Focus - Shows tooltip when the slider handle receives keyboard focus

The Auto mode provides the best user experience by adapting to the user's device capabilities.

Methods

OnInitializedAsync()

Method invoked when the component is ready to start, responsible for initializing the tooltip component and registering it with the parent slider.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous initialization operation.

Remarks

This method is called during the component lifecycle initialization phase. It registers this tooltip component with its parent slider component so that the slider can access and manage the tooltip configuration.