ASP.NET MVC
Demos
Support
Forum
Download
Search results

Tooltip

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

Default tooltip

By default, tooltip is not visible. You can enable the tooltip by setting the enable property to true and injecting the TreeMapTooltip module using the TreeMap.Inject(TreeMapTooltip).

The following example shows the default tooltip.

razor
tooltip.cs
@using Syncfusion.EJ2;
<div id="container">
    @Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").TooltipSettings(tool => tool.Visible(true)).LeafItemSettings(leaf => leaf.LabelPath("fruit")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { fruit: 'Apple', count: 5000 },
            { fruit: 'Mango', count: 3000 },
            { fruit: 'Orange', count: 2300 },
            { fruit: 'Banana', count: 500 },
            { fruit: 'Grape', count: 4300 },
            { fruit: 'Papaya', count: 1200 },
            { fruit: 'Melon', count: 4500 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Format tooltip

By default, 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 formatting the tooltip.

razor
format.cs
@using Syncfusion.EJ2;
<div id="container">
    @Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").TooltipSettings(tool => tool.Visible(true).Format("Name:${fruit} - TotalCount:${count}")).LeafItemSettings(leaf => leaf.LabelPath("fruit")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { fruit: 'Apple', count: 5000 },
            { fruit: 'Mango', count: 3000 },
            { fruit: 'Orange', count: 2300 },
            { fruit: 'Banana', count: 500 },
            { fruit: 'Grape', count: 4300 },
            { fruit: 'Papaya', count: 1200 },
            { fruit: 'Melon', count: 4500 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Tooltip template

Any HTML element can be displayed in tooltip using the ‘template’ property. You can use ${datafield} as placeholder in HTML element to display the values from data source.

The following example shows tooltip template.

razor
template.cs
@using Syncfusion.EJ2;
<div id="container">
    @Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").TooltipSettings(tool => tool.Visible(true).Template("<div><p>Name: ${fruit}</p><p>Total Count: ${count}</p></div>")).LeafItemSettings(leaf => leaf.LabelPath("fruit")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { fruit: 'Apple', count: 5000 },
            { fruit: 'Mango', count: 3000 },
            { fruit: 'Orange', count: 2300 },
            { fruit: 'Banana', count: 500 },
            { fruit: 'Grape', count: 4300 },
            { fruit: 'Papaya', count: 1200 },
            { fruit: 'Melon', count: 4500 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
Previous
Next