ToolTip in WinUI Slider

16 Jun 20213 minutes to read

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

Show Tooltip

You can enable tooltip for the thumb using the ShowToolTip property of Slider. It is used to indicate the current selection of the value during interaction. The default value of ShowToolTip property is true.

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

Slider with tooltip

Tooltip Text Format

The ToolTipFormat property allows to customize the axis label with the globalized label format. The default value of 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

Its DataContext is SliderToolTipInfo.