.NET MAUI Slider & Range Slider: Tooltips

• May 07, 2024
• 2 minutes to read

The tooltip visualizes the selected value. To change the current value, move the thumb along the scale.

The following example changes tooltip appearance in DXSlider and DXRangeSlider controls:

XAML

<dxe:DXSlider 
    TooltipDisplayFormat="C" 
    Value="48">
    <dxe:DXSlider.TooltipAppearance>
        <dxe:DXSliderTooltipAppearance 
            BackgroundColor="Orange" 
            CornerRadius="15"
            MinHeight="25"
            MinWidth="25"
            TextColor="White"
            FontFamily="Arial"
            FontSize="18"
            FontAttributes="Italic"
            Padding="20"
            Indent="15" />
    </dxe:DXSlider.TooltipAppearance>
</dxe:DXSlider>

<dxe:DXRangeSlider
    StartTooltipDisplayFormat="N1" 
    EndTooltipDisplayFormat="N1"  
    StartValue="15" 
    EndValue="85">
    <dxe:DXRangeSlider.StartTooltipAppearance>
        <dxe:DXSliderTooltipAppearance 
            BackgroundColor="orange" 
            CornerRadius="15"
            MinHeight="25"
            MinWidth="25"
            TextColor="White"
            FontFamily="Arial"
            FontSize="18"
            FontAttributes="Italic"
            Padding="20"
            Indent="15" />
    </dxe:DXRangeSlider.StartTooltipAppearance> 

    <dxe:DXRangeSlider.EndTooltipAppearance>
        <dxe:DXSliderTooltipAppearance ... />
    </dxe:DXRangeSlider.EndTooltipAppearance> 
</dxe:DXRangeSlider>

Use the following properties to change tooltip appearance in DXSlider and DXRangeSlider controls:

DXSliderTooltipAppearance.BackgroundColor

Gets or sets the tooltip background color. This is a bindable property.

DXSliderTooltipAppearance.CornerRadius

Gets or sets the corner radius of the tooltip. This is a bindable property.

DXSliderTooltipAppearance.MinHeight

Gets or sets the minimum height of the tooltip. This is a bindable property.

DXSliderTooltipAppearance.MinWidth

Gets or sets the minimum width of the tooltip. This is a bindable property.

DXSliderTooltipAppearance.TextColor

Gets or sets the tooltip text color. This is a bindable property.

DXSliderTooltipAppearance.FontFamily

Gets or sets the tooltip text font name. This is a bindable property.

DXSliderTooltipAppearance.FontSize

Gets or sets the tooltip text font size. This is a bindable property.

DXSliderTooltipAppearance.FontAttributes

Gets or sets whether the tooltip text is bold or italic. This is a bindable property.

DXSliderTooltipAppearance.Padding

Gets or sets the tooltip padding. This is a bindable property.

DXSliderTooltipAppearance.Indent

Gets or sets the distance between the tooltip and thumb. This is a bindable property.

DXSlider.TooltipDisplayFormat

Gets or sets the pattern used to format the tooltip content. This is a bindable property.

DXRangeSlider.StartTooltipDisplayFormat

Gets or sets the pattern used to format the start tooltip content. This is a bindable property.

DXRangeSlider.EndTooltipDisplayFormat

Gets or sets the pattern used to format the end tooltip content. This is a bindable property.