Tooltip for when users hover over states

[eweisbrot]

Hello,

Is any way to add a tool tip for each state name for when a user hovers over the states? I tried using the code found here to no avail: https://github.com/NewSignature/us-map/issues/31

My map can be found here: http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond_map.htm

Thanks in advance!

[adamfratino]

Your map doesn't have the ID selectors used in #31. Replace: $('#map-inside, #map-home') with: $('#map')

[eweisbrot]

Thanks for the response. I tried editing the code with your suggestion, but I still can't get it to work. I don't see any errors when I view in developer tools either.

Any ideas as to what the issue is?

[adamfratino]

You could try targeting $('path') instead. If you add a console log message for mouseover do you receive a message in console? For example:

$('path').mousemove(function(e) { var mousex = e.pageX - 30; //Get X coordinates var mousey = e.pageY - 50; //Get Y coordinates console.log(mousex, mousey);

[eweisbrot]

Thanks for the quick response. I tried targeting the $('path'), but still no dice. Bear with me...I'm completely new to javascript.

[adamfratino]

Unfortunately I can't help much because I'm busy, but I've packaged a working example for you to study: (link removed)

[eweisbrot]

Thanks for your time. Hmmm...I copied/pasted your entire script, but the mouseover tool tip still didn't work.

Anyone know what the issue might be?

[CaptainStack]

I have finally got around to making a fork with a few extra features, including the tooltip one that has been requested by @eweisbrot . Check it out:

https://github.com/CaptainStack/us-map

Instructions are in the readme. Please give me feedback and further feature requests!

[eweisbrot]

Hey CaptainStack,

Thanks for making the updates. I'm currently using your updated version of raphael.js and have added "enableToolTips: true" to the map code, but I can't get the tool tips to work. Any ideas why this might be?

Thanks in advance,

[eweisbrot]

Nevermind...got it!

[eweisbrot]

Thanks again!

[eweisbrot]

@CaptainStack

Is there anyway to edit the speed in which the tool tip appears when a user hovers over a state?

[CaptainStack]

@eweisbrot The tooltip is added because the SVG element has a "title" element. Unfortunately, with this implementation, that means that the tooltip will look and behave as specified by the browser's native behavior. Granting more control over the style and behavior of the tooltip would require a more complex solution. It seems enough people might want that I'll consider adding it, but it will take more time.

[eweisbrot]

Alright, no big deal. Works great for now. Thanks again!