Search results

Tooltip

Tooltip is used to display details about the items in TreeMap when the mouse hovers over the item.

Default tooltip

By default, the tooltip is not visible. You can enable the tooltip by setting the Enable property to true in the TreeMapTooltipSettings tag.

The following example shows the default tooltip.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="@fruits">
    <TreeMapLeafItemSettings LabelPath="Name"></TreeMapLeafItemSettings>
    <TreeMapTooltipSettings Visible=true></TreeMapTooltipSettings>
</EjsTreeMap>

@code {
    public class Fruit
    {
        public string Name;
        public int Count;
    };

    private List<Fruit> fruits = new List<Fruit> {
        new Fruit { Name="Apple", Count=5000 },
        new Fruit { Name="Mango", Count=3000 },
        new Fruit { Name="Orange", Count=2300 },
        new Fruit { Name="Banana", Count=500 },
        new Fruit { Name="Grape", Count=4300 },
        new Fruit { Name="Papaya", Count=1200 },
        new Fruit { Name="Melon", Count=4500 }
    };
}

TreeMap with tooltip

Customization

You can customize the TreeMap component tooltip using following properties.

  • Fill - Specifies fill color
  • Opacity - Specifies opacity of the tooltip
  • TreeMapTooltipBorder - Specifies tooltip border color and width
  • TreeMapTooltipTextStyle - Specifies tooltip font family, style, weight, color, size
@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="@fruits">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray" Gap="2"></TreeMapLeafItemSettings>
    <TreeMapTooltipSettings Visible=true Opacity="0.2">
        <TreeMapTooltipTextStyle FontStyle="italic" FontWeight="bold" Size="15">
        </TreeMapTooltipTextStyle>
    </TreeMapTooltipSettings>
</EjsTreeMap>

Refer code block to know the property value of fruits.

TreeMap with custom tooltip

Formatting tooltip text

By default, the tooltip shows information about weight value of current item. In addition, to show more information in tooltip, Format the tooltip as ${datafield} from data source.

The following example shows how to format the tooltip.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="@fruits">
    <TreeMapLeafItemSettings LabelPath="Name"></TreeMapLeafItemSettings>
    <TreeMapTooltipSettings Visible=true Format="Name: ${Name} - TotalCount: ${Count}"></TreeMapTooltipSettings>
</EjsTreeMap>

Refer code block to know the property value of fruits.

TreeMap with tooltip formating option