i'm trying to make a tooltip appear on a mouseover of an image - and it does

but i'd like the tooltip to disappear when the pointer moves away from the image. i can make it work with the onclick event but not the onblur:

the disappear works here:
<a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a>

but not here:

<a onfocus='this.blur();' onmouseover="document.getElementById('PopUp').style.display = 'table' " onblur="document.getElementById('PopUp').style.display = 'none' ">

anyone know why?

In the first case, you're changing the cursor style in the onmouseover event, calling this.blur() in the focus() event, and setting style.display to none for onclick.

But in the second case, you change style.display to table for the onmouseover event.  Why is that?  Also, there's no text after the <a> tag...

It might also help to post the code for your tooltip function.

well....it didn't want things to get too complicated......

this is an xslt file on a dnn page

so i didn't post all of the code.

basically...i'm just trying to figure out why i can't get the onblr to do exactly what the onclick does.

it seems the onblur is ignored. the onclick works.

here's the entire template:

</xsl:template>


            <!-- this could obviously be expanded to properly handle multi-variant products -->
            <xsl:template name="MultiVariant">
                <xsl:param name="pName" select="aspdnsf:GetMLValue(Name)"></xsl:param>
                <xsl:param name="pDescription" select="aspdnsf:GetMLValue(Summary)"></xsl:param>



                <table border="1" width="160px" height="260px" cellpadding="4" cellspacing="0">
                    <tr>
                        <td align="left" valign="top">


    <a onfocus='this.blur();' onmouseover="document.getElementById('PopUp').style.display = 'table' " onblur="document.getElementById('PopUp').style.display = 'none' ">
                            <xsl:value-of select="aspdnsf:LookupImage(ProductID, 'product', 'medium', 1)" disable-output-escaping="yes"/></a>

                        </td>
                    </tr>
                    <tr>
                       <td align="center"><font size="1"><xsl:value-of select= "aspdnsf:GetMLValue(Name)" disable-output-escaping="yes"/></font></td>
                    </tr>  
                    <tr>
                       <td><table width="100%"><tr><td align="left"><font size="1"><xsl:value-of select= "aspdnsf:GetMLValue(VariantName)" disable-output-escaping="yes"/></font></td><td align="right"><font size="1">$<xsl:value-of select="format-number(aspdnsf:GetMLValue(Price), '##,###.00')"
disable-output-escaping="yes"/></font></td></tr></table></td>

                   </tr>  
                </table>
    <div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 300px;'>

    <xsl:value-of select= "aspdnsf:GetMLValue(Name)" disable-output-escaping="yes"/>


    <br />
    <div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a></div>
    </div>



            </xsl:template>

You might try using onmouseout instead of onblur.  Does the onfocus event for the <a> tag ever fire?  I don't recall the exact rules, but I would be surprised if just hovering over a link caused it to get focus.  You normally have to click on an object first in order for it to get focus, such as clicking in a text box.

rats. i got all excited because the "onmouseout" appeared to work.

but not in IE!

For IE try onmouseleave(). I'm pretty sure you can onmouseout and onmouseleave attributes in the same tag even if the browswer persay doesnt understand it.

man....this is soooo frustrating. can't believe IE doesn't have an onmouseover event.

i tried your suggestion of using onmouseenter and onmouseleave but......nothing happens in IE still....

<a onmouseover="document.getElementById('PopUp').style.display = 'table' " onmouseenter="document.getElementById('PopUp').style.display = 'table' "

onmouseout="document.getElementById('PopUp').style.display = 'none' " onmouseleave="document.getElementById('PopUp').style.display = 'none' ">
                            <xsl:value-of select="aspdnsf:LookupImage(ProductID, 'product', 'medium', 1)" disable-output-escaping="yes"/></a>

btw......any idea why the popup, which displays the product name, always shows product 1's name....no matter which product i mouse over???

i viewed the source for the page and it shows each individual product's name......

hmmm i tend to agree with you onmouseover works in my IE stuff. I've never used it inside an anchor tag though...

Can you try to replace  your <a> tag with a  <div> tag such as:

<div onmouseover="[showcode]" onmouseenter="[showcode]' " onmouseout="[hidecode]">

<xsl:value-of select="aspdnsf:LookupImage(ProductID, 'product', 'medium', 1)" disable-output-escaping="yes"/>

Regarding the product id showing only the first item i think it may an issue with you looping (traversing) through the table structure.. I'm not that fluent in XSLT

darn....

i tried your DIV suggestion but get the same results....

works in firefox but not in IE

rats

OK I'd really like to know if onmouseover is actually firing could you change your onmouseout to code to

onmouseout="alert('working')"

just to make sure ....

i tried your test....

it worked (it displayed "working" on the mouseout event)

OK this leads me to believe that onmouseout is not the issue somewhere else. Try these three things (but not all at the same time)

1. Double check the syntax of your source make sure getElementById() is typed exactly like that (DOM is case sensitive)

2. Change your document.getElementById('PopUp').style.display = 'table'  to document.getElementById('PopUp').style.display = 'block' " keep style.display = 'none' the same as is.

3. Lastly change try using document.getElementById('PopUp[).style.visibility = 'hidden' (its not preferred but if it works, it works)

Good luck

#2 worked! - thanks!

now if i could just figure out why the popup always shows the first items name no matter which item i mouseover.......

when i view the page source.....i can see that the item name is in fact correct for each item's popup code.....but doing an actual mouseover still shows only the first item's name regardless of which item i mouseover.....

for example....when i do 'view source' on the rendered page.....for item 1 i see this:

<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 300px;">Pliers34</div>

and item 2 shows:
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 300px;">Wrench62</div>

and yet.....when i mouseover item 2, the popup reads: "Pliers34"

(same with every item)