Marketer’s Geek

This is going to be an ongoing exploration into "tooltips"

Tooltips are those little pieces of text that pop up when you scroll over them.  They show up for a moment or two and then hide themselves away.

For instance, mouse over the following word: tooltip.

When you did this, you most likely saw a yellowish box pop up with the text "Tooltips are a feature of HTML 4.0"

So…I’m going to assume you know a little bit about html.

HTML is noted for "marking up" text, and does so by enclosing affected text in a tag — actually, enclosing the text in a "begin" tag and and "end" tag.

So the tag has a name, a label, and a "begin tag" and an "end tag."

All tags begin and end the same way — beginning tags simply surround the text label with angle brackets.  End tags look nearly the same, except before the opening angle bracket, it has a forward slash.

For instance, a common tag is the paragraph tag "<p>"

The name of the tag is "pararaph tag."

The label of the tag is "p"

The beginning, or opening tag is: <p>

And the ending or closing tag is: </p>

(This is generally how the tags work — there are some exceptions, and the exceptions can vary, as well, depending upon what version of HTML you are using.)

All Tags Can Have Attributes

If tags are a food, attributes are like spices that add dimensionality — for instance, like a tooltip.

Not all tags can have all attributes — some are unique to particular tags.

But in the case of tooltips, the attribute that is used can be used with ANY tag.

And that attribute is the "title" attribute.

So, in the demonstration above, I simply used a "span" tag, the label of which is "span".

<span title="Tooltips are a feature of HTML 4.0>tooltips</span>

And that’s how I made the tooltip above.

Just put in a title attribute into a surrounding tag.

Interesting Uses of Tooltips

When exploring google to learn more about tooltips, the page I found and enjoyed also used Kontera.  Kontera is a type of contextual advertising.  It works a lot like tooltips in that you can hover over a word and a display comes up.

There are a couple of things that are different about what Kontera does, though.

First, it makes use of javascript to create the effect.

Second, it also uses a double-underline to indicate a word of interest.

Third, the display is quite unique.

We’ll look more into Kontera and other sites that use tooltip variations in the future.

Hope you’ve found this intereseting and useful!

Hi,  and welcome to the Marketer’s Geek blog.

That’s me, Judy Kettenhofen, and I am both a marketer and a geek.

So join me as we explore the Jungle we know as the web!