Treemap tooltip 'z-index'
184 views
Skip to first unread message
pub...@pluhk.com
Feb 16, 2016, 3:12:03 PM2/16/16
to Google Visualization API
I am using a Treemap based on the Treemaps documentation utilising the generateTooltip option with the 4 line tooltip example.
The Treemap displays as expected but the tooltips appear 'behind' the Treemap. If a tooltip is displayed for a cell near the edge I see a partial tooltip, half 'under'' the Treemap, the other half to the side of the Treemap.
Looking in developer tools in Chrome I see hidden tooltip <DIV>'s inserted just after the <BODY> but before the <DIV> containing the Treemap. If I manually move, in developer tools, one of the tooltip <DIV>s to be after the Treemap <DIV> the tooltip displays on top as required.
I assume the Treemap javascript is inserting the hidden tooltip <DIV>s, how can I make sure they are inserted after the Treemap <DIV> so the tooltips appear on top or is there something else I am missing.
The Treemap displays as expected but the tooltips appear 'behind' the Treemap. If a tooltip is displayed for a cell near the edge I see a partial tooltip, half 'under'' the Treemap, the other half to the side of the Treemap.
Looking in developer tools in Chrome I see hidden tooltip <DIV>'s inserted just after the <BODY> but before the <DIV> containing the Treemap. If I manually move, in developer tools, one of the tooltip <DIV>s to be after the Treemap <DIV> the tooltip displays on top as required.
I assume the Treemap javascript is inserting the hidden tooltip <DIV>s, how can I make sure they are inserted after the Treemap <DIV> so the tooltips appear on top or is there something else I am missing.
Thanks,
Paul
Daniel LaLiberte
Feb 16, 2016, 3:31:51 PM2/16/16
to Google Visualization API
Hi Paul,
The Treemap example in the documentation is working properly, and here is a jsfiddle example that uses the same custom tooltip builder: https://jsfiddle.net/dlaliberte/yo9omau8/
Since it is not working for your page, I would suspect the problem you are seeing involves something about the container of your Treemap, or perhaps the timing of how it is drawn. Could you point us at your page so we could see it in action?
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3c8a2e62-46d8-4d15-a701-fe969995f87e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
pub...@pluhk.com
Feb 17, 2016, 6:59:23 AM2/17/16
to Google Visualization API
Daniel,
Thanks for the reply and jsfiddle example. While I was in the process of removing superfluous elements to get the page to a minimum to demonstrate the issue I noticed it suddenly started working with the tooltips appearing on top as expected.
My page is programmatically generated and there are no CR/LF characters or other formatting to make it more humanly readable and that was the issue. Simply adding a space at the end of the file, after </HTML> cause the tooltips to work as expected.
Here is the example where the tooltips appear 'under' the Treemap http://www.pluhk.com/Treemap-Tooltip-Under.html
Here is the example where the tooltips appear 'over' the Treemap http://www.pluhk.com/Treemap-Tooltip-Over.html
The only difference between the two files is an extra space on the end of the file that works.
Looking in developer tools at the elements, the example that does not work the tooltip <DIV>s are inserted BEFORE the Treemap <DIV> and in the example that works the tooltip <DIV>s are inserted AFTER the Treemap <DIV> hence the z-index rendering differences.
Who knew the power of a space :)
Thanks for your help,
Paul
Thanks for the reply and jsfiddle example. While I was in the process of removing superfluous elements to get the page to a minimum to demonstrate the issue I noticed it suddenly started working with the tooltips appearing on top as expected.
My page is programmatically generated and there are no CR/LF characters or other formatting to make it more humanly readable and that was the issue. Simply adding a space at the end of the file, after </HTML> cause the tooltips to work as expected.
Here is the example where the tooltips appear 'under' the Treemap http://www.pluhk.com/Treemap-Tooltip-Under.html
Here is the example where the tooltips appear 'over' the Treemap http://www.pluhk.com/Treemap-Tooltip-Over.html
The only difference between the two files is an extra space on the end of the file that works.
Looking in developer tools at the elements, the example that does not work the tooltip <DIV>s are inserted BEFORE the Treemap <DIV> and in the example that works the tooltip <DIV>s are inserted AFTER the Treemap <DIV> hence the z-index rendering differences.
Who knew the power of a space :)
Thanks for your help,
Paul
Daniel LaLiberte
Feb 17, 2016, 9:12:48 AM2/17/16
to Google Visualization API
Paul,
That is quite bizarre. I can see the problem in your example, and I suspect the way that the treemap code is adding the tooltip is not as robust as it could be. Still, glad you found a workaround.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/ce8bbd55-117a-4de9-a74d-3818337c9bef%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages