kendo-vue/knowledge-base/add-tooltip-to-treeview.md

title	description	type	page_title	slug	tags	res_type	category
Add a Tooltip to the TreeView Component	An example about how to add the Native Toolbar to the Kendo UI for Vue Native TreeView component.	how-to	Add a Tooltip to the TreeView Component - Kendo UI for Vue Native Tooltip - Kendo UI for Vue Native TreeView	add-tooltip-to-treeview	tooltip, treeview, kendovue, native	kb	knowledge-base

Environment

Product Version	3.3.2
Product	Progress® Kendo UI for Vue Native

Description

Learn how to add the Tooltip component to the TreeView in the Kendo UI for Vue Native suite.

KB sections

• Solution description
• Runnable example

Solution description

To display the Native Tooltip when hovering a node in the Native TreeView, you have to define a custom template for the TreeView items. The custom template of the TreeView can be defined through its item property.

The runnable example in the next section below, uses the following template which is passed to the item prop of the TreeView.

<template v-slot:item="{ props }">
  <span :title="props.item.description">
    <span :class="iconClassName(props.item)" key="0" />
    {{ props.item.text }}
  </span>
</template>

In the above template you can see that we are passing the value of the description dataItem field to the title attribute of the span element rendered in each item. Once we have a title attribute definition for each TreeView node, we only have to initialize the Tooltip as follows:

    <Tooltip :position="'right'" :anchor-element="'target'">
      .............
	  TreeView definition
      .............
    </Tooltip>

Runnable example

{% meta id:index height:460 %} {% embed_file add-tooltip-to-treeview/main.vue preview %} {% embed_file add-tooltip-to-treeview/main.js %} {% endmeta %}