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);});
Thanx for the post, I noticed if one uses ul/li elements as a source, one can just adds a title-attribute to the li elements, this gets added as a tooltip automatically! Which is what I needed in my case …