# ToolTip Behavior

RadChart provides a tool tip behavior that can be used to visualize information related to a data point. If the user holds down the mouse directly over a data point, the tooltip will display information for this particular data point, otherwise it will display information for the closest data point to the hold location.

> The DataContext of ChartTooltipBehavior consists of objects of type **DataPointInfo**.

## Properties

* **ContentTemplate** (DataTemplate): This is an attached property used by chart series to define different tooltips on a per series basis.
* **ShowDelay** (TimeSpan): Gets or sets the delay to be applied before the tooltip is displayed.
* **VerticalAlignment**: Gets or sets the alignment of the tooltip according to the touch point along the vertical axis.
* **HorizontalAlignment**: Gets or sets the alignment of the tooltip according to the touch point along the horizontal axis.
* **SnapToClosestPoint** (bool): Determines whether the tooltip will snap to the location of the closest data point.
* **IsOpen** (bool): Determines whether the tooltip is currently displayed.

## Declaration

**Example 1** shows how to add a **ChartTooltipBehavior** to the Behaviors collection.

#### **Example 1: Inverse axes in RadCartesianChart**

```XAML
<telerikChart:RadCartesianChart.Behaviors>
	<telerikChart:ChartTooltipBehavior/>
</telerikChart:RadCartesianChart.Behaviors>
```

## Example

**Examples 2, 3 and 4** show how to use the **ChartTooltipBehavior** with two **BarSeries**. We will demonstrate how to define behavior on a per chart and per series basis. Additionally, this example uses a custom **Converter** to format the content of the tooltip template.

#### **Example 2: Model and ViewModel**

```C#
public class Data
{
	public string Category { get; set; }

	public double Value { get; set; }

	public double SecondValue { get; set; }

	public string Country { get; set; }

	public string SecondCountry { get; set; }
}

public class ViewModel
{
	public ViewModel()
	{
		this.Data = this.GetData();
	}

	public List<Data> Data { get; set; }

	private List<Data> GetData()
	{
		List<Data> data = new List<Data>();
		data.Add(new Data() { Category = "Apples", Value = 10, SecondValue = 5, Country = "Bulgaria", SecondCountry = "Italy" });
		data.Add(new Data() { Category = "Oranges", Value = 12, SecondValue = 9, Country = "Brazil", SecondCountry = "USA" });
		data.Add(new Data() { Category = "Pineaples", Value = 8, SecondValue = 13, Country = "Philippines", SecondCountry = "Brazil" });

		return data;
	}
}
```

**Example 3** shows the definition of the chart. First we have used a **ChartTooltipBehavior** that is defined in the **Behaviors** collection of the chart. This is a global behavior and it will be applied to all series. Then in the definition of one of the **BarSeries** we define another **ChartToolTipBehavior** that will be used only by this specific series and it will override the global behavior.

#### **Example 3: RadCartesianChart with ChartTooltipBehavior**

```XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadCartesianChart PaletteName="DefaultDark" x:Name="chart" Width="700" Height="700">
		<telerikChart:RadCartesianChart.DataContext>
			<local:ViewModel/>
		</telerikChart:RadCartesianChart.DataContext>
		<telerikChart:RadCartesianChart.Resources>
			<local:CustomConverter x:Key="Converter"/>
		</telerikChart:RadCartesianChart.Resources>
		<telerikChart:RadCartesianChart.Behaviors>
			<telerikChart:ChartTooltipBehavior>
				<telerikChart:ChartTooltipBehavior.ContentTemplate>
					<DataTemplate>
						<Border BorderBrush="#80D6F4" BorderThickness="1">
							<StackPanel Background="White">
								<TextBlock Text="{Binding DataPoint.DataItem.SecondCountry, Converter={StaticResource Converter}, ConverterParameter=Country}" Foreground="#076FA0" />
								<TextBlock Text="{Binding DataPoint.Value, Converter={StaticResource Converter}, ConverterParameter=Value}" Foreground="#99441D"/>
								<TextBlock Text="{Binding DataPoint.Category, Converter={StaticResource Converter},ConverterParameter=Category}" Foreground="#506005"/>
							</StackPanel>
						</Border>
					</DataTemplate>
				</telerikChart:ChartTooltipBehavior.ContentTemplate>
			</telerikChart:ChartTooltipBehavior>
		</telerikChart:RadCartesianChart.Behaviors>
		<telerikChart:RadCartesianChart.VerticalAxis>
			<telerikChart:LinearAxis/>
		</telerikChart:RadCartesianChart.VerticalAxis>
		<telerikChart:RadCartesianChart.HorizontalAxis>
			<telerikChart:CategoricalAxis/>
		</telerikChart:RadCartesianChart.HorizontalAxis>

		<telerikChart:BarSeries ItemsSource="{Binding Data}">
			<telerikChart:BarSeries.CategoryBinding>
				<telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
			</telerikChart:BarSeries.CategoryBinding>
			<telerikChart:BarSeries.ValueBinding>
				<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
			</telerikChart:BarSeries.ValueBinding>
		</telerikChart:BarSeries>

		<telerikChart:BarSeries ItemsSource="{Binding Data}" >
			<telerikChart:ChartTooltipBehavior.ContentTemplate>
				<DataTemplate>
					<Border BorderThickness="1" BorderBrush="Orange">
						<StackPanel>
							<TextBlock Text="{Binding DataPoint.DataItem.SecondCountry}" Foreground="Orange"/>
							<TextBlock Text="{Binding DataPoint.Value}" Foreground="Orange" HorizontalAlignment="Center" VerticalAlignment="Center"/>
						</StackPanel>
					</Border>
				</DataTemplate>
			</telerikChart:ChartTooltipBehavior.ContentTemplate>
			<telerikChart:BarSeries.CategoryBinding>
				<telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
			</telerikChart:BarSeries.CategoryBinding>
			<telerikChart:BarSeries.ValueBinding>
				<telerikChart:PropertyNameDataPointBinding PropertyName="SecondValue"/>
			</telerikChart:BarSeries.ValueBinding>
		</telerikChart:BarSeries>
	</telerikChart:RadCartesianChart>
</Grid>
```

**Example 4** shows the value converter used in the chart bindings.

#### **Example 4: CustomConverter implementation**

```C#
public class CustomConverter : IValueConverter
{
	public object Convert(object value, Type targetType, object parameter, string language)
	{
		return string.Format("{0} is {1}", parameter, value);
	}

	public object ConvertBack(object value, Type targetType, object parameter, string language)
	{
		throw new NotImplementedException();
	}
}
```

#### **Figure 1: BarSeries with custom tooltip**

![WinUI RadChart Rad Chart-Behaviors-Chart Tool Tip Behavior-Complex Example](https://www.telerik.com/winui/documentation/assets/aaeeefd9118ad2b32615a812933da81f/radchart-behaviors-charttooltipbehavior-complexexample.png)
