It looks like you're new here. If you want to get involved, click one of these buttons!
under Firefox I'm able to see this:
But on Chrome (v49.0.2623.110 m) neither of these tooltips appear (image map on the left, drop down list on the right)
Tipped doesn't support image maps, have a look at this thread for more on that:
A selectbox option doesn't have a true position in the browser, on mobile a selectbox might not even be a dropdown, you should avoid attaching tooltips to it.
on mobile I just show an alert window when the user clicks on the drop down list item. I guess I will have to do the same for Chrome, as well as switch over to div instead of area.
Sorry but I'm just curious as to why Tipped works with image maps on Firefox but not Chrome? If I disable Tipped creation both Chrome and FF pop up the "default" tooltips over the image map, but when I enable Tipped only Firefox generates the Tipped tooltip. Is it just happenstance that something in the way FF anchors area tags to the page allows Tipped to position itself properly? I'm really looking for a way to avoid having to rip out my dependency on image maps which, although "old tech" I actually find easier to setup and manage than a bunch of floating div areas
Here's an example that can be viewed in FF and Chrome to see tips working/not (hover over the dots)
A map can describe an abstract shape that you can't read out as a box (x,y/width,height) like regular elements. If you see this working in Firefox it's only because it might have some partial support. Adding complete support for area tag measurement is something you might expect from jQuery since it takes care of the measuring, but the nature of an area tag just isn't suitable for box measurement, this is why jQuery doesn't go there.
I could imagine a plugin that adds some partial support for imagemaps to jQuery, but this is not something I intend to do with Tipped.
ok, I have a viable workaround!
There's just one minor problem with this method, for some reason, on the main page, when the tooltip appears a second empty tooltip appears as well. But it doesn't happen on this page, nor any other planet page I click to, which is all the same script. Not sure what's different.
Edit: did find another page with the empty tooltip: http://www.kerbalspace.agency/Tracker/body.asp?db=bodies&body=Kerbin-System still trying to figure out what's diff about it
still not sure about the empty tooltip but I did recall how in FF I sometimes get this: http://i.imgur.com/tvEUwYw.png
It pops up for just a split second before the rich tooltip appears. That might be what is showing up in Chrome, but still not sure what to do about it
That's a loading icon, you can disable it with spinner: false.
As for the workaround, using feature detection would probably be better than sniffing for chrome, you might want the workaround on other browsers as well. You basically write a test that runs once and checks if you can get dimensions and position on an area tag the regular way and store the resulting boolean to use instead of the browser sniff.
thx for the advice on the feature detect, that's a good point.
the spinner: false option doesn't seem to do it though... this is what it looks like in Chrome: http://i.imgur.com/6LphuhJ.png
I'm defining the option in the data-tipped-options for the chromeMapTip div
I think the best way to avoid problems is to read out the image map and replace it with divs or link tags where needed, removing the image maps on just the area tags that need to be replaced. After that you'll only have to create a tooltip for either the area tag or its replacement tag, that should help avoid duplicate tooltip issues.
Basically a scripts that replaces area tags with absolute positioned links, something you could even do for all browsers or even without a script.
sigh yea I guess so, since it seems my fix for Chrome doesn't work in Safari -_-