flotTip div is showing below footer under 768px

[leecolarelli]

I am building a dashboard which includes Flot Tooltips. I noticed that the flotTip div is being written at the bottom of the page, just above the closing body tag.

When the screen is resized below 768 pixels the flotTip is being shown below the footer, and creating a lot of white space.

Any idea's?

[kenirwin]

Creationsphere --

I'm having this same problem, just with pie charts. (Line chart tooltips are working ok.) What kind of charts were you experiencing this with?

Here's a view of how this renders on the UI side: the tooltip shows up after all the other content on the page.

The flotTip appears to be absolutely positioned. I suspect this may be related to lines 268-270 of the source.js code: if( $tip.length === 0 ){ $tip = $('<div />').addClass(this.tooltipOptions.cssClass); $tip.appendTo('body').hide().css({position: 'absolute'});

I don't see anything in the code that more normally applies relative positioning. I hope someone who understands the positioning code better than we do can help out!

[kenirwin]

I'm wondering whether the initial commenter diagnosed this problem correctly. I'm unable to recreate the problem based on the size of the window, but I always get this problem with pie charts.

When I examine the CSS for .flotTip on a pie-chart, all I see is this: display: block; position: absolute;

But for other styles of chart, the CSS updates position (left and top) dynamically as the mouse moves, eg: display: block; position: absolute; z-index: 1040; padding: 0.4em 0.6em; border-radius: 0.5em; font-size: 0.8em; border: 1px solid rgb(17, 17, 17); white-space: nowrap; left: 180px; top: 191px; background: rgb(255, 255, 255);

I believe that the pie chart tooltip is not invoking whatever JS looks at the current mouse position and sets the left and top values in relation to that. I've been looking at the JS source code but haven't been able to figure out how all the positioning works or what triggers it to position.