Adding web page tooltips that are iPad* compatible

In recent weeks, I have been working on MeshCentral, a central web site for managing all our computers. I got lots of features added in and more to come but I wanted to make the web site more user friendly by adding pop-up tool tips as certain places. I also wanted it to not be annoying and be compatible with touch screen devices such as the Apple iPad* and the many others that are likely to hit the market.

I just started getting familiar with JQuery and looking for JQuery compatible tool tips is easy, there are many of them. In fact, JQuery has basic support already built-in. Sadly, all of these will detect that the mouse hovers over an area and display the help. First, I wanted to have the user click to get help, avoiding having tip windows pop in and out as the mouse moves. I also wanted the tip window to close using a close button. This way, the site would work great for tablet owners.

After some research I found a great example in "atooltip", it did exactly what I wanted but did have some quirks I had to fix. For example: When clicking many tips in a row, the help text would pile up on the window. I also has a problem with my social configuration page. The user on that page can opt to hide portions of the page, and hitting a tool tip and closing the area on the page should close the tool tip.

Well, took about two hours but tool tip help support is now added to MeshCentral. I only use it in two pages (account & social settings), but more to come.