Tree Items with Tooltips

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);
});
treeview-tooltips

About admin


This entry was posted in jQuery UI, jQuery UI Widgets, jQuery Widgets, jqxTree and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.



One Response to Tree Items with Tooltips

  1. flexcarver says:

    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 …

Leave a Reply