This is a test of a hovering help box. Look at the source to see how it's done. It isn't pretty and there are certainly better ways of doing it. Feel free to let me know: David Weinberger, email@example.com
Any object, like this one, that has a "help=" attribute will get a hover balloon
They can include HTML markup of various sorts.
This one doesn't have any help.
This one has help. It works if you hit an internal span like this one, too.
The basic way this works:
- Mark the element you want to have popup help with an attribute called "help." The content of that attribute will be the content of the balloon. E.g. <p help="This is some <em> help</em>.">
- Declare those elements to be position:relative.
- Create the help balloons using the CSS styling you'd like, but make their position absolute. Use margin-top and margin-left to position them relative to the element they're explaining. Don't forget about negative margins.
- Change the mouseenter event for elements with the "help" attribute. Also the mouseleave event.