Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How do I have additional info pop up on href links?

I noticed that my local newspaper's Web site now has the lead paragraph of stories magically pop up when I put my cursor over the headline link on their site. Nice! How can I do something similar on my own pages?

Dave's Answer:

I've seen this appearing more and more on pages I visit too, so I know exactly what you're talking about, and it's all done with an additional attribute to the a href tag that you're already using on your site.

Here's how a regular text link appears:

<a href="http://www.askdavetaylor.com/">Tech Support at Ask Dave Taylor</a>

Nothing new there, I hope!

To add the pop-up tip window, all you need to do is add a title attribute to this tag. Like this:

<a href="http://www.askdavetaylor.com/" title="Tech support and business questions, all answered with aplomb by Dave Taylor. A recommended site.">Tech Support at Ask Dave Taylor</a>

Now, when you hover over that link in a Web browser, you'll see this:

Floating Tip from HTML 'title' attribute

But don't take my word for it, try it yourself:

Tech Support at Ask Dave Taylor

That's all there is to it. Nice and simple, for once. :-)

Oh, one caveat: some search engine tricksters use this sort of technique to "keyword load" their pages with lots of additional choice phrases. This is probably not a good idea and it's pretty easy for a search engine algorithm to analyze the frequency and words in these title tags and get cranky. Just a word to the wise...

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: HTML and CSS (Article 7115)
Tagged: html, hypertext references, seo
Previous: How can I use robots.txt meta information to stop being spidered?
Next: How do I change my MSN Hotmail password?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Note about use of title attribute. The value of title attribute should not be too long text. Mozilla family of browsers display this text in one line so some of it may get truncated. IE wraps the text so in IE, all text is visible. Even in your example I can only see text "Tech support and business questions, all answered with aplomb by Dave Taylor. A r..." in the firefox as tooltip.

Posted by: vineet at January 3, 2007 10:13 PM

I don't really like the whole ALT attribute because you don't have the freedom to apply colors and text (bold, italics, etc) to the content in the ALT of the HTML tag. I prefer using qTip(http://solardreamstudios.com/learn/css/qtip/), a solution written by the maker of solarDreamStudios (http://solardreamstudios.com/). What qTip does is replace the ALT tags in the HTML - using javascript - and use a custom styled DIV over it. My favorite feature is that the DIV kind of follows your mouse around.

It's also pretty small too!

Posted by: FuzzMop at March 5, 2007 7:51 PM

I have something to say, now that you mention it, but ...

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you for all your efforts on this Web site by buying you a cup of coffee!

I do have a comment, now that you mention it!