ToolTip Support in UWP Range Selector (SfDateTimeRangeNavigator)

DateTimeRangeNavigator control provides ToolTip support for Sliders. Sliders are used to select a particular region of data in the DateTimeRangeNavigator control. ToolTips for sliders show the selected start and end date time values. You can even view exact date values to the precision of milliseconds.

The following properties are used to customize the ToolTip settings for the DateTimeRangeNavigator control.

Default tool tip template of SfDateTimeRangeNavigator.

ToolTip support for DateTimeRangeNavigator

The following code illustrates the customization of tool tip.

<chart:SfDateTimeRangeNavigator x:Name="RangeNavigator" Width="700" Height="179"                                      

ItemsSource="{Binding StockPriceDetails}"

ShowToolTip="True" 

ToolTipLabelFormat="yyyy/MMM/dd"  

XBindingPath="Date" >

<Grid x:Name="grid">

    <Grid.Resources>
            
        <DataTemplate x:Key="tooltipTemplate1">

                <Border BorderBrush="Black" BorderThickness="0.5" Background="SeaGreen"  Width="100" Height="30" CornerRadius="10">

                    <TextBlock Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding}">

                    </TextBlock>

                </Border>

       </DataTemplate>

        <DataTemplate x:Key="tooltipTemplate2">

                <Border BorderThickness="0.5" BorderBrush="Black" Background="SeaGreen"  Width="100" Height="30" CornerRadius="10">

                    <TextBlock Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding}">

                    </TextBlock>

                </Border>

        </DataTemplate>

   </Grid.Resources>

<syncfusion:SfDateTimeRangeNavigator LeftToolTipTemplate="{StaticResource tooltipTemplate1}"
                                             
                                     RightToolTipTemplate="{StaticResource tooltipTemplate2}"/>
</Grid>
SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
{

    ItemsSource = new ViewModel().StockPriceDetails,

    XBindingPath = "Date",

    ShowToolTip = true,

    ToolTipLabelFormat = "yyyy/MMM/dd",

    LeftToolTipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate

};

Customizing the labels of tooltip for DateTimeRangeNavigator