jQWidgets Forums

Tagged: jqxTooltip, jqxtree, Tooltip, Tree, truncate text

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Tree Content Length & Tooltips Posts

February 14, 2013 at 10:01 pm Tree Content Length & Tooltips #15261

Participant

How can I implement tooltips on tree items? To prevent some odd display issues w/ really long tree item names we’re truncating the data passed to the tree. This makes it difficult to select the correct item at times though, so we’d like to have a tooltip appear when a tree item is hovered over which would display the full text of the item.

Is this currently possible, and if not, can you consider adding it at some point in the future?

Thanks.

February 15, 2013 at 7:04 am Tree Content Length & Tooltips #15279

Dimitar

Participant

Hello shimmoril,

While there is no built-in tooltip feature in jqxTree, you may use jqxTooltip for that purpose. Here is an example, based on the Default Functionality jqxTree demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The jqxTree in this demo displays images next to the tree items.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme });
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
            var treeTooltip = "";
            $("#jqxTree .jqx-tree-item").jqxTooltip({ name: "treeTooltip", theme: theme, position: "mouse" });
            $("#jqxTree .jqx-tree-item").mouseenter(function (event) {
                treeTooltip = event.target.textContent.replace(/\s+/g, ' ');
                $("#jqxTree .jqx-tree-item").jqxTooltip({ content: treeTooltip });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders</div>
            <div id='jqxTree'>
                <ul>
                    <li item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
                            item-title="true">Mail</span>
                        <ul>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
                                    item-title="true">Calendar</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">Contacts</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Admin</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Corporate</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Finance</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Today</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Week</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
                                        item-title="true">Notes</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
                                        item-title="true">Settings</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                        item-title="true">Favorites</span> </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.