If your sidebar text is too long, APEX truncates it to some fixed width. Here comes the use of Tool Tip option for the side bar. Also if you make the sidebar navigation menu collapsed by default and when only the icons are displayed, This Tool Tip will be helpful to understand the menu better.
Here are the simple steps to achieve this tool-tip functionality.
1) Create an Global Page (Page 0) if its not already present.
2) In Page 0, Create a Dynamic Action on Page Load.
3) Select Action as "Execute JavaScript Code" and paste the below code in its source.
//Tooltip for Menu Text
$("#t_TreeNav").treeView("option", "tooltip", {
content: function(cb, node) {
return node.label;
}
} );
//This tells the tooltip to show up for the whole node content including the icon.
$("#t_TreeNav").tooltip("option", "items", ".a-TreeView-content");
In the above piece of code "t_TreeNav" is the ID of the sidebar navigation tree which is set by default in Universal Theme.
Once the Dynamic Action is created, Run the application and hover the mouse through Sidebar menu to see the Tool Tip in action.
Below is the sample application which demonstrates the use of tool-tip.
https://apex.oracle.com/pls/apex/f?p=83384
Cheers!!!!
Here are the simple steps to achieve this tool-tip functionality.
1) Create an Global Page (Page 0) if its not already present.
2) In Page 0, Create a Dynamic Action on Page Load.
3) Select Action as "Execute JavaScript Code" and paste the below code in its source.
//Tooltip for Menu Text
$("#t_TreeNav").treeView("option", "tooltip", {
content: function(cb, node) {
return node.label;
}
} );
//This tells the tooltip to show up for the whole node content including the icon.
$("#t_TreeNav").tooltip("option", "items", ".a-TreeView-content");
In the above piece of code "t_TreeNav" is the ID of the sidebar navigation tree which is set by default in Universal Theme.
Once the Dynamic Action is created, Run the application and hover the mouse through Sidebar menu to see the Tool Tip in action.
Below is the sample application which demonstrates the use of tool-tip.
https://apex.oracle.com/pls/apex/f?p=83384
Cheers!!!!
Hi, thanks for sharing !
ReplyDeleteI've found a bug : if you're using modal window, all buttons will not work after doing this ...
If you have any workaround ... ;)
use parent. before $ in both lines below
Deletefor example
parent.$("#t_TreeNav").treeView("option", "tooltip", {
content: function(cb, node) {
return node.label;
}
} );
//This tells the tooltip to show up for the whole node content including the icon.
parent.$("#t_TreeNav").tooltip("option", "items", ".a-TreeView-content");
Hi Thanks for sharing this.
ReplyDeleteI found some discrepancy with this implementation ,as it also shows tooltip on other events like 'click'(expanding child items).Is anything we can do for this, Kindly suggest.
Awesome thank you.
ReplyDeleteThanks Prashanth, worked like a charm!
ReplyDeleteWelcome!!!
Deletehello again, i am getting this error for some pages, have this happened before to you?. they have the same page template, but for some reason treeView widget is unknown just in these pages.
ReplyDeleteUncaught TypeError: $(...).treeView is not a function
Thank you very much!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteif ($("#t_Body_nav #t_TreeNav")[0] != undefined) { $("#t_Body_nav #t_TreeNav").treeView("option", "tooltip", { content: function(cb, node) { return node.label; } }); $("#t_Body_nav #t_TreeNav").tooltip("option", "items", "#t_Body_nav .a-TreeView-content");}
ReplyDelete//https://community.oracle.com/tech/developers/discussion/4329217/menu-tooltip