Oooh, Shiny..

UPDATE 5/24/12: This specific widget is no longer being used on my new template, though I am working on something similar.

I had some crazy idea earlier this week on something I wanted to develop for the site. I thought, what if people were able to hover over links that I have to my family tree section and get some basic information on that person without ever having to leave the post? Well, it went from idea to (almost) finished product in about 3 days. I know it’s not a perfect implementation and I plan on tweaking it to make it work better and more efficient.

So, now if you hover over a name on my posts that link to a person’s information page, like for example, Richard ZALEWSKI, it will show you basic information about my grandfather in a tooltip. If you want the full details, you can still click on the link and go to the family tree page. This only works on individuals right now and not family group sheets, but I don’t link to them that often.

I’ve tested the implementation in most of the major browsers including Internet Explorer 8, Mozilla Firefox 3.6, and Google Chrome 5. I’m pretty sure it works in just about everything as long as you have Javascript enabled, according to the tooltip code I used.

Let me know how you like it and if it’s too annoying or clunky. Constructive criticism is good so I can fix issues with it. So, you’re my beta testers! Enjoy.

For the technical mumbo-jumbo for all you geeks or if anyone is interested, keep reading.

For anyone interested in what I used to make this, or what is required if and when I give out the code, here it is.

The 4 main components that you need for this implementation are:

• The Next Generation of Genealogy Sitebuilding (v7) – The software that my family tree is running on and the database layout that the script is expecting.
• jQuery – The wonderful and amazing Javascript framework that is used for all of the tricky Javascript and tooltip work.
• qTip – A jQuery plugin that makes creating and working with the tooltips a breeze.
• CodeIgniter – The PHP framework I used to do all of the database heavy-lifting. This is just the option I found and used, but I may use another option in the future to make this script/addon easier to give out.

WordPress is not required, nor is any other blog software. You could run this on any page as long as the above four items are available, at this point.

In a nutshell, what this script does is it checks for all of the links on my site that include the “getperson.php” file in them. This is the file that shows an individual’s detailed info. When it sees you hover over one of these links, it grabs the person’s ID and runs it through the database grabbing all of the relevant information. Then it puts all of this info into the little tooltip that is created by qTip. In reality, there is more to it, but that’s how it works from a mile-high view.

I’m sorta proud of this little script I built, mainly because I wanted to do it and I did it. It’s probably not very clean or efficient, but I’ll get to it.