Version

Node Tooltips

This topic demonstrates how to add tooltips to the nodes of xamOrgChart™ and how to customize their content.

The topic is organized as follows:

Introduction

The xamOrgChart and the OrgChartNodeLayout class have properties related to the usage of tooltips:

Note
Note:

If the Org Chart displays data using Hierarchical Node Layouts, since the control acts as the root Node Layout, the tooltip properties can be set on the xamOrgChart control.
Note
Note:

The code snippets and illustrations in this topic use the Org Chart created in Adding xamOrgChart to Your Application.

Basic Tooltips

The field to be used as a tooltip is specified in the ToolTipPath property.

Adding ToolTipPath="JobTitle" will create a simple tooltip displaying the Job Title for all Employee nodes.

In XAML:

<ig:OrgChartNodeLayout
    TargetTypeName="Employee"
    DisplayMemberPath="FirstName"
    ToolTipPath="JobTitle" />
xamOrgChart Node Tooltips 01.png

Figure 1: A simple tooltip

Adding a tooltip to the xamOrgChart:

In XAML:

<ig:XamOrgChart
    ToolTipPath="JobTitle">
</ig:XamOrgChart>

Custom Tooltips

Use the TooltipContentTemplate property to specify a custom template for the tooltip.

Creating a DataTemplate object:

In XAML:

<DataTemplate x:Key="EmployeeTooltipTemplate">
    <StackPanel>
        <TextBlock Text="{Binding JobTitle}" FontWeight="Bold" />
        <TextBlock Text="{Binding FirstName}" />
        <TextBlock Text="{Binding LastName}" />
    </StackPanel>
</DataTemplate>

In XAML:

<ig:OrgChartNodeLayout
    TargetTypeName="Employee"
    DisplayMemberPath="FirstName"
    ToolTipContentTemplate="{StaticResource EmployeeTooltipTemplate}" />
xamOrgChart Node Tooltips 02.png

Figure 2: A custom tooltip using a Data Template

Adding a custom tooltip to the xamOrgChart:

In XAML:

<ig:XamOrgChart
    ToolTipContentTemplate ="{StaticResource EmployeeTooltipTemplate}">
</ig:XamOrgChart>

Related Topics

Using xamOrgChart