nvd3 tooltips not coming on mouse over at the same place in internet explorer in Modal window

[NSudhir]

Hello All, We are using NVD3 and D3 java script libraries and we are integrating this with salesforce analaytics api. The way which we want these charts to be used is we do have different landing pages(VF Pages )in our org and there is a custom button on that Page. So on click of that button i want to display charts in a modal ( Namely Multibar, Discrete and Horizontal charts). I included those charts in vf page and the tooltips for those charts are very wierd coming at different places in the modal. So we decided to place each chart in the iframe so i think that solved my issue. The big issue which we are in to right now is the browser compatibility. The charts are not same in Ie9 as what they are looking in chrome. So any suggestions would be a great help.Thank you in advance:)

[liquidpele]

We refactored tooltips in the current development branch, which is also in the 1.8.1-alpha right now... that will likely fix your issues, let us know!

https://github.com/novus/nvd3/tree/v1.8.1-alpha

[NSudhir]

Sure will check it and let you know. Thank you.

[NSudhir]

Hi that completely knocked out my tooltips. I am not able to see 1 either!!

[liquidpele]

are you perhaps using the tooltipContent option? that part changed some and you will need it to redo the custom tooltip if that's the case.... just look at the examples from that branch to see how they're doing it now but the gist is that you should use chart.tooltip.contentGenerater

[liquidpele]

for is this an IE 9 thing?

[NSudhir]

Yes ppreviously when i am refering 1.1.15b version the tool tips are behaving in the way i want in chrome but they are moving to far right in IE 9. I just saw a glimse of tooltip which is to far left after uploading the 1.8 version css and java script!

[NSudhir]

And right now we are displaying the charts in the modal window. Previously we used to display it on the visual force page. in that i write a custom tooltip code based on pixels of the page . i will paste the custom tooltip code for one of the chart. But it seems like that javascript is not applying on the modal window which makes my job hard.

$(document).ready(function () {

$("#LineChart").mouseover(function(e) { $("#CustomTooltip").removeClass('.nv-pointer-events-none'); alert('hiiii'); var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.cssClass {top: '+e.pageX+'px ; left: '+e.pageX+'px !important; opacity: 1; position: obsolute; }'; document.getElementsByTagName('head')[0].appendChild(style);

   });

[liquidpele]

Yea, I haven't tested with IE9 in a while... if you figure out what's wrong with it you can send us a pull request with the fix, but I really only worry about IE10+ for myself...

I can't really tell what you're doing with that tooltip code...

http://nvd3-community.github.io/nvd3/examples/site.html

It should have examples for charts with custom tooltips I think... or check out the tooltip object documentation:

http://nvd3-community.github.io/nvd3/examples/documentation.html#tooltip (specifically check out the contentGenerator option there)

You really should't have to use jquery at all...

[NSudhir]

Let me know one thing pls. how to set the custom tool tip!! And the second question is will the chart tooltips aligns correctly in Modal window. Because i am using mulitiple charts in the modal window (Multi, Horizontal, Discrete). So as i said before the chart tooltips were all over the window.So i really dont know how to approach this issue, so i come up with iframes for each chart and now the chart tooltips are working fine in chrome but not in IE9,11. So not sure how to fix the browser compatibility issue now?

[NSudhir]

This is how it looks in IE9 i am placing my cursor at the blue dot in pic and i am getting the tooltip at the pointer. This is working fine in chrome. Any suggestions on that! if you want me to place the code i am using i can do that. Pls let me know. Thank you.

[liquidpele]

That doesn't look like the new default tooltip format... you should probably try removing all your custom tooltip stuff and see if it works, then add back formatting from that point.

[NSudhir]

Right now i dont have any custom tolltip file referencing in the code.

[NSudhir]

Is there a way to paste the code here!! So that you can see what exactly i am doing. I am using bootstrap columns too.

[liquidpele]

Then it doesn't look like you're using the latest nvd3 cod3 from https://github.com/novus/nvd3/tree/v1.8.1-alpha

You can create a jsfiddle or plunkr to demo it if you want.

[NSudhir]

Yh i tried referencing the latest nvd3 and referencing that in component, but as i said before when i try doing that the the tool-tips are completely disappearing.

[liquidpele]

Well, the old tooltips had known bugs with positioning, so you'll need to try the new ones and debug the issues with the new ones...

[liquidpele]

If you can create a jsfiddle or plunkr to demonstrate the issue with the new code then I can take a look for you, but it's not worth it to debug the older stuff since it was already deleted/refactored.

[NSudhir]

Oh ok. i will try again referencing the new js library and paste the pic of how tooltip looks like.Thank you.

[liquidpele]

A pic isn't going to help much I don't think, I'll need to see a demo so I can debug it with dev tools.

[NSudhir]

Sure.

[NSudhir]

is there any updated version for d3 javascript library after this 3.5.3? right now i am referencing 3.5.3!

[liquidpele]

Any 3.5.x version is fine, that's what I use as well.

[NSudhir]

ok.

[NSudhir]

Hi after uploading that new js library and referencing i got the tool tips finer than with the previous version but still in IE9 they stick at a single place. the attached is the image.

[NSudhir]

i never used both of the jsfiddle and plunker before. so i dont know how they work. So can i paste my code here?

[liquidpele]

https://jsfiddle.net/ - you can create example pages there to share, it's a very widely used site so it'll be good to learn how to use. Please do not paste your code in the discussion.

[NSudhir]

Seems like its pretty hard to paste the entire code because i have that entire code in between sales force tags and i am using these charts as a part of the pages. The individual charts works absolutely fine and no issues with the tooltips either. When i try to combine all these charts the issue of tooltip arising which solves by using iframe. The suggestion i would like to hear is did you heard any tooltips issues in IE9, because even while combining all the charts and rendering in Modal the tooltips are working fine in chrome. But they are fixing to the left most of the page in IE9. So any help on this issue would be a great help.

[NSudhir]

And i am taking the data from the report and displaying it in a chart

[liquidpele]

So is it working correctly in everything except IE9?

[NSudhir]

yes.tooltips are not correct in ie

[NSudhir]

Hi this is how tooltip looks in ie9. my cursor is at red arrow and tooltip is at blue arrow. Tooltip position remains constant where ever i place my cursor on the chart. Position is pretty much fixed in IE. Can you help with this issue please.Thank you.

[liquidpele]

I can't even install IE9 anymore... the only download for it is for Vista :/

[NSudhir]

Oh ok. So any quick suggestion on that!!

[joshjordan]

@liquidpele https://www.modern.ie/en-us/virtualization-tools

On Tue, Apr 21, 2015 at 5:40 PM NSudhir notifications@github.com wrote:

Oh ok. So any quick suggestion on that!!

— Reply to this email directly or view it on GitHub https://github.com/novus/nvd3/issues/966#issuecomment-94950137.

[NSudhir]

@liquidpele Hi did you got an chance to try them in ie9?

[liquidpele]

I won't have the time for a while and IE9 just isn't a big priority for me. If you wan to try and work on it and send any fixes via a pull request we'll look though :)

[NSudhir]

OK. Thank you.