Moving the Tooltip Out of the Title Attribute to a Separate Span Tag

[Kirk Ouimet]

I've been running into some XHTML validation issues due to me getting a little excited over the script and adding a very complex tool tip composed of multiple divs and spans. I would really like to have a page that fully validates even with my crazy tips.

An idea came to me last night that I could get my page to validate by taking the tooltip out of the title attribute and moving it to a span tag with display: none just before or after the element that I want to exhibit the tip.

Does anyone have an idea of how easy this modification would be, and could you point me in the right direction on getting it done?

Thanks!

[Sirdude]

That's what i did and it works fine.

I also tried moving the title to a containing <td> and that works well. The only problem with doing it with the TD tag, is that the hover / show tooltip / hide kinda goes away, as you are always just moving from one td to another td with no real break to stop the hover.

so you get that nice fade in on the first mouseover, then it's kinda intantaneous after that.

That's why i moved to the span idea, so there was some 'dead space' between being in a hover and NOT being in a hover condition.

[Kirk Ouimet]

Sirdude,

Will you post your modified code? I'd love to use it!

[Sirdude]

Well, i didnt' modify any code. All i did was attach the title to a containing span.

I'll post an example of the generated html though, just to clarify. And i actually used a DIV vs a SPAN, but don't see why you can't do span.

Method 1 (containing td):

<td title="header=[Preview baby!] body=[This is the preview for when hovering over any part of the td]">
<span style="float:right">
	<img src="sticky.gif" alt="Sticky topic" title="Sticky topic" />
</span>
<a href="/ubbt73/ubbthreads.php/topics/437906/New_features.html#Post437906">New features</a>
<span class="small">by <a href="/users/443/Sirdude.html" rel="nofollow"><span style="color: #FF0000">Sirdude</span></a>
	<img src="adm.gif" alt="Administrator" border="0" />
</span>
</td>

Method 2 (containing div):

<td">
<span style="float:right">
	<img src="sticky.gif" alt="Sticky topic" title="Sticky topic" />
</span>
<div title="header=[Preview baby!] body=[This is the preview for when hovering over any part of the div]">
	<a href="/ubbt73/ubbthreads.php/topics/437906/New_features.html#Post437906">New features</a>
</div>
<span class="small">by <a href="/users/443/Sirdude.html" rel="nofollow"><span style="color: #FF0000">Sirdude</span></a>
	<img src="adm.gif" alt="Administrator" border="0" />
</span>
</td>

2 examples that both work with the quirk i mentioned about the td

and i'm not sure if this will solve your validation issues though. matter of fact, i don't see this helping you as i re-read your original post

sowwy