New to Kendo UI for Vue? Start a free 30-day trial

Add a Tooltip to the TreeView Component


Product Version3.3.2
ProductProgress® Kendo UI for Vue Native


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

KB sections

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 }}

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

Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?