Add a Tooltip to the TreeView Component

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.

js

<template #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:

js

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

Runnable example

Change Theme

Theme

Loading ...