Tooltip in UWP Sunburst Chart (SfSunburstChart)

10 May 20216 minutes to read

ToolTip allows you to display any information over a sunburst segment. It appears when mouse hovered over or touch any chart segment. By default, it displays the corresponding segment category name and its value.

<sunburst:SfSunburstChart.Behaviors>
             
           <sunburst:SunburstToolTipBehavior />
                
 </sunburst:SfSunburstChart.Behaviors>
SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.ShowToolTip = true;
chart.Behaviors.Add(tooltip);

Tooltip_img1

Aligning the ToolTip

The tooltip position can be aligned with respect to the cursor position by using HorizontalAlignment and VerticalAlignment properties.

HorizontalAlignment

The following code shows, how to position the tooltip to right of the cursor.

<sunburst:SfSunburstChart.Behaviors>

     <sunburst:SunburstToolTipBehavior HorizontalAlignment="Right"/>

</sunburst:SfSunburstChart.Behaviors>
SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.HorizontalAlignment = HorizontalAlignment.Right;
sunburstChart.Behaviors.Add(tooltip);

Tooltip_img2

VerticalAlignment

The following code shows, how to position the tooltip to bottom of the cursor.

  • XAML
    • <sunburst:SfSunburstChart.Behaviors>

     <sunburst:SunburstToolTipBehavior VerticalAlignment="Bottom"  />

</sunburst:SfSunburstChart.Behaviors>

    Tooltip_img3

    VerticalOffset and HorizontalOffset

    The tooltip position can be customized to a custom position from the cursor using the HorizontalOffset and VerticalOffset properties.

    <sunburst:SfSunburstChart.Behaviors>

       <sunburst:SunburstToolTipBehavior HorizontalOffset="50"
                                         VerticalOffset="50"/>

</sunburst:SfSunburstChart.Behaviors>
    SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.HorizontalOffset = 50;
tooltip.VerticalOffset = 50;
sunburstChart.Behaviors.Add(tooltip);

    Tooltip_img4

    TooltipDuration

    You can set display duration for tooltip by using the ShowDuration property.

    <sunburst:SfSunburstChart.Behaviors>

            <sunburst:SunburstToolTipBehavior ShowDuration="6000"/>

</sunburst:SfSunburstChart.Behaviors>
    SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.ShowDuration = 6000;
chart.Behaviors.Add(tooltip);

    Show Delay

    We can set the initial display delay for Tooltip by using InitialShowDelay property as like in below code.

    <sunburst:SfSunburstChart.Behaviors>

            <sunburst:SunburstToolTipBehavior InitialShowDelay="500"/>
                
</sunburst:SfSunburstChart.Behaviors>
    SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.InitialShowDelay = 500;
sunburstChart.Behaviors.Add(tooltip);

    Animation for Tooltip

    You can enable the translate animation for Tooltip by using EnableAnimation and AnimationDuration property.

    <sunburst:SfSunburstChart.Behaviors>

     <sunburst:SunburstToolTipBehavior EnableAnimation="True" 
                                       AnimationDuration="5000"/>

</sunburst:SfSunburstChart.Behaviors>
    SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
tooltip.EnableAnimation = true;
tooltip.AnimationDuration = 5000;
sunburstChart.Behaviors.Add(tooltip);

    Customize the Tooltip

    You can customize the default appearance of the tooltip by applying the TooltipTemplate property.

  • XAML
    • <sunburst:SunburstToolTipBehavior.ToolTipTemplate>
                        
        <DataTemplate>
                            
               <Border Background="{Binding Interior}"
                       BorderBrush="{Binding Interior}"
                       BorderThickness="4">
                       <StackPanel>
                           <StackPanel Orientation="Horizontal">
                               <TextBlock Text="Category : "/>
                               <TextBlock Text="{Binding Category}"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Value : "/>
                                <TextBlock Text="{Binding Value}"/>
                            </StackPanel>
                        </StackPanel>
               </Border>
                            
       </DataTemplate>
                        
</sunburst:SunburstToolTipBehavior.ToolTipTemplate>

    Tooltip_img5