I am working on a web site project which requires that the web page display tooltips on hover. For reasons I won't go into here, I decided to use a library from a site called dyn-web.com. The library works great but I need to make one small change to the way it works, which will make it a perfect fit for my application. Trouble is, I can't figure out how it works!
- Include a <script src= > tag to the library file
- Add two class names to the HTML element that will host the tooltip, one called "showTip" and the other is a key into a JSON object containing the tooltip text
- Add the tooltip text to the JSON object mentioned above
- Create a style to format the tooltip how you want it to look
I don't want to jump in and start changing the library willy-nilly without knowing how it works, and I've been pulling out my hair trying to figure it out. Can one of you smarter-than-me folks explain it?
What the library probably does is look at all of the elements with class
document.getElementsByClassName("showTip"). Then, it looks at the other class on that element and assumes that as the key to the tooltip with the tooltip text.
Then, it probably creates an element for the tooltip using
document.createElement() and then injects that into the document using
document.insertBefore(). They can probably add some class to the tooltip so your CSS rules are applied using the
It also likely used
document.addEventListener() to listen for when the user hovers over and leaves the element. You don't need to add this code because the
<script> tag you added has called
document.addEventListener() for you.