[thelist] unobtrusive popups with links

[Brian Cummiskey]

I'm working on an unobtrusive JS popup, similar in function to those 
InteliText ads (i'm sure you've seen them.. the double green underline 
ads??)

my basic plan is this:
Search document, and replace some keywords on the fly with a span 
wrapper (didn't do this part yet--- hard coded span around a word for 
now for testing)
replace said span with a useless link "#" and trigger a CSS popup on 
hover via DOM scripting and appending elements

The problem i'm running into is that my spans for the popup are inside 
the A element, and thus any content inside the popup is inside the 
Anchor also, which is giving me a hard time.  The whole point of this 
popup is to link internally to related content based off keywords.  
thus, I have an anchor inside an anchor which doesn't work.


This is what i've whipped up so far, and i can't take credit for a lot 
of the code....  the popups and a couple functions were from various 
other projects i've used in the past from other sources.  will be fully 
documented with sources later.

http://hondaswap.com/testing.php


code starts as:

<div class="page">
            <span class="skmtt">Popup</span><br />
            <span class="other">no pop span</span><br />
            <span class="skmtt">Other popup</span>
</div>



and after the DOM runs and replaces the skmtt class spans, rendering 
turns into:

<div class="page">
	<a class="skmtt_pop" href="#" id="tooltip_0">test<span class="skmtt_tooltip" id="tooltipspan_0"><span class="skmtt_top"></span><span id="skmttinner_0" class="skmtt_mid"><div id="skmtt_guts0" class="skmtt_guts">THIS IS THE POP UP<br><br><a href="/index.php">Some thread</a><br><br><a href="index.php">an other thread</a></div></span><span class="skmtt_bot"></span></span></a><br>
	<span class="other">no pop span</span><br>
	<a class="skmtt_pop" href="#" id="tooltip_1">test<span class="skmtt_tooltip" id="tooltipspan_1"><span class="skmtt_top"></span><span id="skmttinner_1" class="skmtt_mid"><div id="skmtt_guts1" class="skmtt_guts">THIS IS THE POP UP<br><br><a href="/index.php">Some thread</a><br><br><a href="index.php">an other thread</a></div></span><span class="skmtt_bot"></span></span></a>
</div>


As you can see, i have nested Anchors, which doesn't work (on top of the 
fact that it's invalid).


The only way to keep the popup open while mousing IN the popup is to 
have it be inside the A element, which is css styled to display block.



anyone have any suggestions?  Am I going about this all wrong?

TIA