Persistent Browser-Based Games Blog

Tip of the Week

Here’s the ‘tip of the week’! (Even though there hasn’t been a new post in weeks :P)

Do you want to display item/unit/building information on your PBBG, but find that your tables are getting too big, and your divs are cluttering up the page? Use tooltips to display this information in a compact and stylish way!

There are several ways to do this, and of course you can customize your tooltips so they fit right into your PBBG. There are already a few javascript libraries available on the internet which will allow you to use tooltips easily, so I will introduce two of these libraries. If you don’t like them, I’m sure there are more on the Internet!

BoxOver
This is a javascript library that is used by Google on Google Sites (read more about BoxOver on its wikipedia article). Unfortunately, at the time of writing the official BoxOver website is not available. I did find a copy of the Javascript file however. With this library, you set all the tooltip texts/header/styles/other options by using the title attribute in your HTML tags, so it is possible to use these tooltips on many HTML elements.
Examples: http://www.norfolk.gov/cultural_affairs/boxover/example.html

Walter Zorn Tooltip
This library is a bit more advanced than the BoxOver library, and allows you to write your own extensions to create amazing tooltips! However, it may be slightly harder to use/set up, as you must use the onmouseover and onmouseout triggers to display/close tooltips.

Here are some ideas you might want to try out when using tooltips:

• Create your own tooltip! Make it match your game’s style and theme so it will be unique!
• You could also try using AJAX to directly fetch information from a database, so that the information you present will never be out of date and will require little maintenance!
• Use HTML! The libraries I introduced above allow HTML in the actual tooltip text, so don’t hesitate to add images and tables.