# .NET MAUI PieChart Tooltip

The Telerik UI for .NET MAUI PieChart displays a tooltip with information about a slice when you add a `ChartTooltipBehavior` to the `ChartBehaviors` collection of the chart. The tooltip works with the `PieSeries` and the `DonutSeries`.

## Enable the Tooltip

Add a `ChartTooltipBehavior` to the `ChartBehaviors` collection of the `RadPieChart`:

```XAML
<charts:RadPieChart x:Name="chart">
    <charts:RadPieChart.ChartBehaviors>
        <charts:ChartTooltipBehavior x:Name="tooltipBehavior"
                                     TooltipOpening="OnTooltipOpening" />
    </charts:RadPieChart.ChartBehaviors>
</charts:RadPieChart>
```

Add the `charts` namespace:

```XAML
xmlns:charts="clr-namespace:Telerik.Maui.Controls.Charts;assembly=Telerik.Maui.Controls"
```

## Display the Tooltip

To open the tooltip, set the `TriggerMode` (`enum` of type `Telerik.Maui.Controls.Charts.ChartTooltipTriggerMode`) property of the `ChartTooltipBehavior`. The available options are:

* `Tap`—The tooltip opens when you tap a data point. Default on mobile platforms.
* `Hover`—The tooltip opens when you hover over a data point. Default on desktop platforms.
* `Hold`—The tooltip opens when you press and hold a data point.

To define a delay before the tooltip is shown or hidden, use the following properties of the `ChartTooltipBehavior`:

* `HoverDelay` (`int`)—Defines the delay in milliseconds before the tooltip is shown. Applies only to the `Hover` trigger mode and only to the initial show. The default value is `0`.
* `HideDelay` (`int`)—Defines the delay in milliseconds before the tooltip is hidden. For the `Hold` trigger mode, the delay starts when the press is released. This property has no effect for the `Hover` trigger mode.

## Position the Tooltip

To position the tooltip, use the `PlacementMode` (`enum` of type `Telerik.Maui.Controls.Charts.ChartTooltipPlacementMode`) property. The available options are:

* `Pointer` (default)—Places the tooltip at the pointer or tap position.
* `DataPoint`—Places the tooltip at a fixed position relative to the data point.

## Format the Tooltip Label

To format the value displayed in the tooltip, use the `TooltipLabelFormat` (`string`) property of the `ChartTooltipBehavior`. The format string is applied to the value of the data point. For example, to display a percentage with two decimal places, set the `TooltipLabelFormat` to `"{0:P2}"`.

## Events

The `ChartTooltipBehavior` exposes the `TooltipOpening` event, which is raised before the tooltip opens. The `ChartTooltipOpeningEventArgs` expose the `Series`, `SeriesIndex`, `PointIndex`, `DataItem`, `Value`, `Category`, `FormattedValue`, and `SeriesColor` properties, and the `AdditionalData` property, which you can set to pass custom data to the `TooltipContentTemplate`.

The following example calculates the difference between the actual value and a target value and passes it to the tooltip:

```C#
private void OnTooltipOpening(object sender, ChartTooltipOpeningEventArgs e)
{
    if (e.DataItem is not PieDonutTooltipPoint point)
    {
        return;
    }

    double percentage = ((point.Value - point.Target) / point.Target) * 100.0;
    string sign = percentage >= 0.0 ? "+" : string.Empty;
    string formattedPercentage = percentage.ToString("0", CultureInfo.InvariantCulture);
    e.AdditionalData = new PieDonutTooltipInfo($"{sign}{formattedPercentage}% vs target");
}

public sealed record PieDonutTooltipPoint(string Category, double Value, double Target, string Region, int Units);

public sealed record PieDonutTooltipInfo(string VsTarget);
```

## Styling the Tooltip

Use the `TooltipStyle` property of the `ChartTooltipBehavior` to apply a `Style` with target type `ChartTooltip`. Set the following properties to style the tooltip's appearance:

* `TextColor` (`Color`)—Defines the color of the tooltip text.
* `FontSize` (`double`)—Defines the font size of the tooltip text.
* `FontFamily` (`string`)—Defines the font family of the tooltip text.
* `FontAttributes` (`FontAttributes`)—Defines the font attributes of the tooltip text.
* `BackgroundColor` (`Color`)—Defines the background color of the tooltip.
* Border properties (`BorderColor`, `BorderBrush` `BorderThickness`, `CornerRadius`)—Define the border of the tooltip.
* `ContentPadding` (`Thickness`)—Defines the padding of the tooltip content.

```XAML
<Style x:Key="TooltipStyle"
       TargetType="charts:ChartTooltip">
    <Setter Property="BackgroundColor" Value="#E8F5E9" />
    <Setter Property="BorderColor" Value="#2E7D32" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ContentPadding" Value="12,8" />
    <Setter Property="TextColor" Value="#1B5E20" />
</Style>
```

```C#
this.tooltipBehavior.TooltipStyle = (Style)this.Resources["TooltipStyle"];
```

## Customizing the Tooltip Content

Use the `TooltipContentTemplate` property to define custom content. The following template displays the series color and name, properties from the business object, the formatted value, and the `AdditionalData` set in the `TooltipOpening` event:

```XAML
<DataTemplate x:Key="TooltipContentTemplate"
              x:DataType="charts:ChartTooltipContext">
    <VerticalStackLayout Spacing="6">
        <HorizontalStackLayout Spacing="8">
            <BoxView Color="{Binding SeriesColor}"
                     WidthRequest="12"
                     HeightRequest="12"
                     VerticalOptions="Center" />
            <Label Text="{Binding Series.DisplayName}"
                   FontAttributes="Bold"
                   VerticalOptions="Center" />
        </HorizontalStackLayout>
        <VerticalStackLayout BindingContext="{Binding DataItem}"
                             x:DataType="local:PieDonutTooltipPoint"
                             Spacing="2">
            <Label Text="{Binding Category}"
                   FontSize="12" />
            <Label Text="{Binding Region}" />
            <Label Text="{Binding Units, StringFormat='Units: {0}'}" />
        </VerticalStackLayout>
        <Label Text="{Binding FormattedValue}"
               FontSize="18"
               FontAttributes="Bold" />
        <VerticalStackLayout BindingContext="{Binding AdditionalData}"
                             x:DataType="local:PieDonutTooltipInfo">
            <Label Text="{Binding VsTarget}"
                   FontAttributes="Bold" />
        </VerticalStackLayout>
    </VerticalStackLayout>
</DataTemplate>
```

```C#
this.tooltipBehavior.TooltipContentTemplate = (DataTemplate)this.Resources["TooltipContentTemplate"];
```

## Customizing the Tooltip Control Template

To fully change the tooltip appearance, set the `ControlTemplate` property of the `ChartTooltip` through the `TooltipStyle`. Use a `ContentPresenter` to display the tooltip content, and bind to the `ChartTooltip` text properties through a `RelativeSource` binding:

```XAML
<ControlTemplate x:Key="TooltipControlTemplate">
    <Grid>
        <Grid.Resources>
            <Style TargetType="Label">
                <Setter Property="TextColor"
                        Value="{Binding TextColor, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontSize"
                        Value="{Binding FontSize, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontFamily"
                        Value="{Binding FontFamily, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontAttributes"
                        Value="{Binding FontAttributes, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
            </Style>
        </Grid.Resources>
        <telerik:RadBorder BackgroundColor="#F3E5F5"
                           BorderColor="#7B1FA2"
                           BorderThickness="2"
                           CornerRadius="12">
            <ContentPresenter Margin="10" />
        </telerik:RadBorder>
    </Grid>
</ControlTemplate>

<Style x:Key="TooltipControlTemplateStyle"
       TargetType="charts:ChartTooltip">
    <Setter Property="ControlTemplate" Value="{StaticResource TooltipControlTemplate}" />
</Style>
```

```C#
this.tooltipBehavior.TooltipStyle = (Style)this.Resources["TooltipControlTemplateStyle"];
```

## See Also

* [Pie Series](https://www.telerik.com/maui-ui/documentation/controls/charts/pie-chart/series/pie-series)
* [CartesianChart Tooltip](https://www.telerik.com/maui-ui/documentation/controls/charts/cartesian-chart/tooltip)