Lets get right to it since I’m busy as hell today.

The tooltip is a shorthanded way of referring to the title attribute of a link or image (most commonly) though it can be used on other HTML elements. Since we’re all SEO experts around here, we know the only way to fly is to make a link like this:

<a href="link-url.html" title="Descriptive and relevant keyword phrase">revevant text for destination</a>

But what of the cold, huddled masses who shout from the mountain tops “But Cynic, I want a two-line tooltip!” Well, sure. We can do that with Javascript.

1. Parse out and replace text in static tooltip.
2. Write the tooltip with a function

Parse out and replace text in static tooltip

Lets toss a bit of text in our title attribute to tell us where we want our line break. I’m going to pretend I’m on a forum and make a quicktag-looking [br]:

<a href="link-url.html" title="Descriptive and[br]relevant keyword phrase">hi mom</a>

Now we need to create that linefeed. Lets make a function, and pop it into the head tag (or linked .js file).

function makeMyLinefeedReal(imageElement) {
  var titleAttribute;
  titleAttribute = imageElement.title;
  titleAttribute = titleAttribute.replace(/\[br\]/, String.fromCharCode(10));
  imageElement.title = titleAttribute;
}

And finally call it from the element.

<a href=”link-url.html” title=”Descriptive and[br]relevant keyword phrase” onmouseover=”makeMyLinefeedReal(this)>hi mom</a>

Done and done. If you want to get really fancypantsed, you can call this from the BODY’s onload, or document.ready if you’re awesomesauce enough to use jQuery.

Write the tooltip with a function

Keep in mind a web crawler isn’t goin go to see something created with javascript, so sure this next method sparingly–we’re going to write the whole title attribute with Javascript. You get to feel good about having neater HTML, and you can toss “non-intrusive clientside DOM scripting” on your resume.

I’m currently using this for tooltips on a page of pie charts right now for a full-time-jobby-job project which won’t be indexed, and even if it was available to the public, I’m not worried about SEO for the statictical breakdowns on the pie charts; just of the page containing the statistics. (Btw–coming soon: Kickass tutorial on making webtastic pie charts using Adobe Photoshop and Illustrator)

So here’s our tag, with a normal attribute.

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

Our function can now take advantage of an escaped new line, \n, instead of having to mess with String.fromCharCode(10).

function makeMyLinefeed(imageElement) {

  imageElement.title = "This is my title\nAnd this is line 2!";

}

And…

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" onmouseover="makeMyLinefeed(this)"/>

Easy, right? I’ll let you get trickier than a straigh line of text on your own. One more version for you: here’s the non-intrusive javascript version. Start with your tag:

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

And this next line does all the fun stuff without any onmouseover attribute:

document.getElementById("favoritePies").mouseover = function () { this.title = "This is my title\nAnd this is line 2!"; }

So there we go, you have a few different ways to toss a line break into a title attribute. Have fun!