Great - thanks for the update!
PS: you would usually not want to have html / body tags inside the hot-spot markup as they will be ignored by the browser anyway or may cause issues. It's best to start with <div></div> and add all your hot-spot markup inside the div (you can style the div as needed using either inline styles or your own CSS).
Also, if you have any images in the hot-spot markup, it's good to specify their dimensions upfront in the markup as well, i.e. <img src="..." width="xxx" height="xxx"/> - this will ensure that the wrapping div will stretch right away just enough to fit all your hot-spot content that may take a moment to load from your server on the first mouse hover / touch on a hot-spot. Another approach is to assign width and height (using styles) to the wrapping div such that it's known to the browser upfront.