Add a Tooltip to the TreeView Component

Environment

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.

Copy Code<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:

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

Runnable example