Adding jQuery code, mouseover popup infobox


#1

HI to all JS-warriors!

Trying to make this interactive svg map
work inside Hype system.

I pasted the svg code of the map into the inner html and
added the css into the Head of html = works well.

map-us.hype.zip (32.7 KB)

But for the next step - adding jQuery code - here I need a help of js-savvy Hype users!

That jQuery code snippet from the Codepen demo makes it possible to
show/hide the info box that follows / floats over the cursor.
Look up

I am a js novice, so
I simply copy-pasted this jQuery code snippet into the Head Html.
But that obviously didn’t do the trick.
Do I need to tweak this jQuery code or smth else?


#2

The code here places the name of the state within an element with the ID ‘info-box’ so if you add an element to your Hype scene with that Unique Element ID, it will follow your mouse and place the info inside of it when you move your mouse over a state. I added an info-box rectangle outside of the scene area that you can use for this:

map-us.hype.zip (36.1 KB)