Easy jQuery Tooltip

Yesterday I went looking for a simple jQuery tooltip, uh, tool, for a website I was working on.  Finding one that wasn’t overly-complicated proved to be more of a challenge than I anticipated.  For the coding noob (e.g. yours truly), “Keep It Simple, Stupid” is the phrase that pays, and most of the ones I came upon tried to do too much and offered too many customization options.

Eventually I stumbled on the self-proclaimed “Simplest jQuery Tooltip Ever“, and I can’t argue with the sentiment.  All you need is jQuery, the additional JavaScript file provided at the link above, and some basic CSS styling (also provided).

Here’s some example code:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js"   type="text/javascript"></script>
</head>
<body>
<a href="#" title="This is the text that will appear
when you roll over the link">Roll over this link</a>
</body>
</html>

Let’s break it down…

<link href="style.css" type="text/css" rel="stylesheet">

… calls the stylesheet that contains a reference to the id selector “#tooltip”.  It has some basic styling info (position, border, background, etc.), but nothing too fancy.

<script src="jquery.js" type="text/javascript"></script>
<script src="main.js"   type="text/javascript"></script>

This first line calls the jQuery library, the second calls main.js, which contains the tooltip code. (Not sure if this qualifies as a jQuery plugin or not…)

<a href="#" title="This is the text that will appear
when you roll over the link">Roll over this link</a>

This is your standard HTML hyperlink, with a couple of differences.  The text contained in the title field is what will be displayed when a visitor hovers over the link.  The href field can contain an actual link; in this case it just points back to the current page.

Doesn’t get much simpler than that!

References:

jQuery Mobile

I haven’t even made it into the first actual Beginning C++ Through Game Programming post before there was a diversion! Oh well, gotta roll with the punches.

I just learned via this Mashable article that the developers of jQuery (the popular JavaScript-based framework) recently introduced their jQuery Mobile initiative, which should allow for cross-platform development on various mobile devices.

It should be interesting to see where this leads – jQuery is easy enough for a beginner like me to use with minimal fuss, and hopefully the mobile version will be as well.