Blogs

In this post, we will demonstrate how to add tooltips to the tree elements. We’ll use the same initialization as in the jqxTree’s Events demo.

var source = [
    { icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
        { icon: "../../images/calendarIcon.png", label: "Calendar" },
        { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
    ]
    },
    { icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
        { icon: "../../images/folder.png", label: "Admin" },
        { icon: "../../images/folder.png", label: "Corporate" },
        { icon: "../../images/folder.png", label: "Finance" },
        { icon: "../../images/folder.png", label: "Other" },
    ]
    },
    { icon: "../../images/recycle.png", label: "Deleted Items" },
    { icon: "../../images/notesIcon.png", label: "Notes" },
    { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
    { icon: "../../images/favorites.png", label: "Favorites" },
    ];
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '250px', theme: theme });

To add the Tooltips, you need to do the following: 1. Get all tree items by using the ‘getItems’ method.

var items = $('#jqxTree').jqxTree('getItems');

2. Loop through the items and set the ‘title’ attribute of each item.

$.each(items, function () {
    $(this.titleElement).attr('title', this.label);
});