| Page 1 of 1 | [ 7 posts ] |
|
I have searched all over internet and tried to find a way to add a tooltip to the datatable headers.
I want to replace the standard "Click to sort..:" for some of the header-fields in my datatable but must be stupid because I cant find a hint anywhere on how to do this. I suspect that it could be quite simple to do but somehow I cant find any solution after 4 hours of googling and trying. Could someone please give a YUI-neewb some help... please.. |
|
Those two text will be automatically applied to the headers of sortable columns and they are taken from the MSG_SORTASC and MSG_SORTDESC configuration attributes
http://developer.yahoo.com/yui/docs/YAH ... SG_SORTASC Whatever text you store in those configuration attributes will be applied to sortable columns only. There is no easy way to provide tooltips of your own besides changing those two strings. I hope changing those texts is all you wanted because doing anything else would be quite hard, specially since you would be constantly fighting DataTable's own built-in tooltips. |
|
Thanx for the answer Satyam!
I try to provide tooltips for each column in the header so manipulating the constants would change for all the columns and thats not working for me. I will try another approach, with an Information icon in the header with the label, with a tooltip connected to the icon and see if that works better. I think one problem with that approach is that the standard tooltip is always shown when the mouse pointer is over the header which would display both my tooltip and the standard tooltip at the same time. |
|
I set both MSG_SORTASC and MSG_SORTDESC to empty strings, which disabled all sorting tooltips completely.
Then I used the example on http://www.satyam.com.ar/yui/#tooltips and changed it to listen to theadLabelMouseoutEvent and theadLabelMouseoverEvent to show and hide the tooltip in the headers. It seems to work very well. |
|
Could you post an example for this?
Or a short code snippet of how this was done? |
|
Satyam/Dany,
Rather than modifying the configuration values can't we do like this? Any issues? //Just below myColumnDefs var toolTipText = "Text on hover" YAHOO.util.Event.addListener("headerCell_ID", "mouseover", showToolTip); function showToolTip(ev){ var yDom = YAHOO.util.Dom;//get the DOM Util Object var c = yDom.getChildren(yDom.getChildren(ev.target)[0]);// here we will get the <a> DOM yDom.setAttribute(c[0], "title", bcToolTipText); //Sets <a title="Text on hover"> for the header } |
|
That is what the ToolTip utility, part of the Container family, does for you. If you want to show more fancy tooltips, that is the best choice.
Regarding your showToolTip method, it is not good to use getChildren or, in general, assume a particular structure on the HTML the DataTable produces. Now that it is not longer a maintained product it is not bound to change but, in general, you should not assume the markup will remain stable. Instead, use the many getXxxxEl() methods which provide you with getters for most HTML. For example, the ScrollDataTable actually uses two separate HTML tables, if you play with the DOM, you might end up using the wrong one. Let DataTable tell you which one is using. |
| Page 1 of 1 | [ 7 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group