ToolTip in WinUI Slider

14 Jul 20264 minutes to read

This section explains how to add the tooltip in the slider.

Show Tooltip

You can enable the tooltip for the thumb using the ShowToolTip property of the slider. It is used to indicate the current selection of the value during interaction. The tooltip is displayed only while interacting with the thumb. The default value of the ShowToolTip property is true.

<slider:SfSlider Value="50"
                 ShowToolTip="True" />
using Syncfusion.UI.Xaml.Sliders;

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = true;
this.Content = sfSlider;

Slider with tooltip

Tooltip Text Format

The ToolTipFormat property allows you to customize the tooltip text with a formatted string. The default value of the ToolTipFormat property is N2.

<slider:SfSlider Value="50"
                 ShowToolTip="True"
                 ToolTipFormat="c" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = true;
sfSlider.ToolTipFormat = "c";
this.Content = sfSlider;

Slider with tooltip format customization

Tooltip Style

The ToolTipStyle property allows you to define the style for the slider tooltip as shown in the following code example. The default value of ToolTipStyle property is null.

<Style x:Name="ToolTipStyle"
       TargetType="slider:SliderToolTip">
    <Setter Property="Background"
            Value="#1257eb" />
    <Setter Property="Foreground"
            Value="White" />
</Style>

<slider:SfSlider Value="50"
                 ShowToolTip="True"
                 ToolTipStyle="{StaticResource ToolTipStyle}" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = true;
sfSlider.ToolTipStyle = this.Resources["ToolTipStyle"] as Style;
this.Content = sfSlider;

Slider with tooltip style

Tooltip Template

The ToolTipTemplate property allows you to define the data template for the slider tooltip as shown in the following code example.

<DataTemplate x:Name="ToolTipTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Current Value : "
                   Margin="0,0,5,0" />
        <TextBlock Text="{Binding ToolTipText}" />
    </StackPanel>
</DataTemplate>

<slider:SfSlider Value="50"
                 ShowToolTip="True"
                 ToolTipTemplate="{StaticResource ToolTipTemplate}" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = true;
sfSlider.ToolTipTemplate = this.Resources["ToolTipTemplate"] as DataTemplate;
this.Content = sfSlider;

Slider with tooltip template

NOTE

The DataContext of the tooltip template is SliderToolTipInfo.