Tooltip in Vue Treemap component

11 Jun 202413 minutes to read

Tooltip is used to display details about the items in the TreeMap. When space constraints prevent us from displaying the information using Data Labels, the tooltip comes in handy.

Default tooltip

The tooltip is not visible by default, to make it visible, set the visible property in the tooltipSettings to true and injecting the TreeMapTooltip.

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { 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 }
];

const weightValuePath = 'count';
const leafItemSettings = {
    labelPath: 'fruit'
};

const tooltipSettings = {
    visible: true
};

provide('treemap', [TreeMapTooltip]);

</script>
<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [
        { 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 }
    ],
   weightValuePath: 'count',
     tooltipSettings: {
            visible: true
    },
    leafItemSettings: {
        labelPath: 'fruit'
     }
    }
  },
  provide:{
    treemap:[TreeMapTooltip]
},
}
</script>

Format tooltip

The tooltip content is displayed by default based on the weightValuePath. In addition, to show more information in the tooltip, use the format property and define field from the data source as ${datafield}.

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";

const dataSource = [
    { 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 }
];

const weightValuePath = 'count';

const tooltipSettings = {
    visible: true,
    format:'Name:${fruit} - TotalCount:${count}'
};

const leafItemSettings = {
    labelPath: 'fruit'
};

provide('treemap', [TreeMapTooltip]);

</script>
<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [
        { 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 }
    ],
   weightValuePath: 'count',
     tooltipSettings: {
            visible: true,
            format:'Name:${fruit} - TotalCount:${count}'
    },
    leafItemSettings: {
        labelPath: 'fruit'
     }
    }
  },
  provide:{
    treemap:[TreeMapTooltip]
},
}
</script>

Tooltip template

Tooltip can be rendered as a custom component using the template property in the tooltipSettings which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. You can use ${datafield} as placeholder in HTML element to display the values from data source.

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";
import {createApp} from 'vue';

const app = createApp({});

let contentVue = app.component("contentTemplate", {
  template: '<div><p>Name : </p><p>TotalCount : </p></div>',
  data() {
    return {
      data: {}
    };
  }
});

let contentTemplate = function() {
  return { template: contentVue };
};

const dataSource = [
    { 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 }
];

const weightValuePath = 'count';

const tooltipSettings = {
    visible: true,
    template:contentTemplate
};

const leafItemSettings = {
    labelPath: 'fruit'
};

provide('treemap', [TreeMapTooltip]);

</script>
<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :tooltipSettings='tooltipSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapTooltip } from "@syncfusion/ej2-vue-treemap";
import {createApp} from 'vue';

const app = createApp({});

let contentVue = app.component("contentTemplate", {
  template: '<div><p>Name : </p><p>TotalCount : </p></div>',
  data() {
    return {
      data: {}
    };
  }
});

let contentTemplate = function() {
  return { template: contentVue };
};
export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [
        { 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 }
    ],
   weightValuePath: 'count',
     tooltipSettings: {
            visible: true,
            template:contentTemplate
    },
    leafItemSettings: {
        labelPath: 'fruit'
     }
    }
  },
  provide:{
    treemap:[TreeMapTooltip]
},
}
</script>