.NET MAUI CircularSlider Tooltips

Updated on Aug 11, 2026

The CircularSlider for .NET MAUI can display a tooltip to indicate the currently selected value to the end user. The tooltip displays as soon as the user starts dragging the thumb.

The CircularSlider tooltip provides the following customization options:

• TooltipStringFormat (string)—Defines a custom string format for the tooltip.
• TooltipContentTemplate (DataTemplate)—Defines a template or template selector that defines the content of the tooltip.
• TooltipControlTemplate (ControlTemplate)—Defines the control template of the tooltip that defines its overall appearance.

TooltipContentTemplate Example

Check below a quick example with setting the TooltipStringFormat and TooltipContentTemplate properties:

1. Add the custom DataTemplate to your page resources:

XAML

<telerik:RadCircularSlider Minimum="0"
                           Maximum="100"
                           Value="35"
                           TooltipStringFormat="{}{0:N0}%"
                           HorizontalOptions="Fill"
                           VerticalOptions="Start"
                           MinimumHeightRequest="300">
    <telerik:RadCircularSlider.TooltipContentTemplate>
        <DataTemplate>
            <Border BackgroundColor="#009688"
                    Padding="8, 4"
                    StrokeShape="RoundRectangle 4">
                <Label Text="{Binding FormattedValue}"
                       TextColor="White"
                       FontAttributes="Bold" />
            </Border>
        </DataTemplate>
    </telerik:RadCircularSlider.TooltipContentTemplate>
</telerik:RadCircularSlider>

2. Apply it to the CircularSlider's TooltipContentTemplate:

XAML

<ControlTemplate x:Key="CustomTooltipControlTemplate">
    <telerik:RadBorder BackgroundColor="#765CBA"
                       CornerRadius="8"
                       Padding="8">
        <Label Text="{Binding FormattedValue}"
               TextColor="White"
               FontAttributes="Bold" />
    </telerik:RadBorder>
</ControlTemplate>

3. Add the telerik namespace:

XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

This is the result:

For a runnable example demonstrating the CircularSlider tooltip content template, see the SDKBrowser Demo Application and go to the CircularSlider > Tooltips category.

TooltipControlTemplate Example

Here is a quick example with setting the TooltipControlTemplate property:

XAML

<telerik:RadCircularSlider Minimum="0"
                           Maximum="100"
                           Value="35"
                           TooltipStringFormat="{}{0:N2}"
                           TooltipControlTemplate="{StaticResource CustomTooltipControlTemplate}"
                           HorizontalOptions="Fill"
                           VerticalOptions="Start"
                           MinimumHeightRequest="300" />

This is the result:

For a runnable example demonstrating the CircularSlider tooltip control template, see the SDKBrowser Demo Application and go to the CircularSlider > Tooltips category.

See Also

• Value Thumb
• Labels