Here one approach:
I created a tooltip display area with <DIV> tags. I used DIV because I want
to be able to apply block element styles. I created a Style called ToolTip
that controls the appearance. I then used your events to cause the ToolTip
to appear and disapper. The location is determined by using the ClientX and
ClientY coordinates of the window.event
I have removed all your XSL from this so that it will run in IE as is.
you'll need to add your XSL back in. Hope it helps some
<html>
<style>
.ToolTip
{
position: relative;
border: 1 solid pink;
background-color: pink;
padding: 2;
font-family:arial;
font-size:8pt;
width=200;
text-align=center;
}
</style>
<script>
var fTipOn
function TipOn(obj)
{
if (fTipOn) {return}
fTipOn=true
obj.style.color="yellow";
document.all.tip.style.display="block"
document.all.tip.style.top=window.event.clientY -40
document.all.tip.style.left=window.event.clientX -40
}
function TipOff(obj)
{
obj.style.color="black";
document.all.tip.style.display="none"
fTipOn=false
}
</script>
<body>
<span onMouseOver="TipOn(this)" onMouseOut="TipOff(this)">Put your mouse
here to see a toop tip</span>
<br/>No tip here
<div id="tip" class="Tooltip" style="display:none">This is my tooltip
text</div>
</body>
</html>
-----Original Message-----
From: bill crawley [mailto:william.crawley@u...]
Sent: Wednesday, November 01, 2000 7:13 AM
To: javascript
Subject: [javascript] floating tooltips
Hi All,
I have an embedded script in an XSLT document. The source doc displays
correctly as far as it goes. Now though Each time I move the cursor over
some text I want to display a tooltip. I cant open a new window since the
tooltip will not be in a file. The tooltip will be stored in an array.
So far I have the following code in the XSLT doc that proves the mouse
events work. I now need to amend the scripts to do tooltips. Any advise
would be appreciated. I can gaurentee that the browser used will be I.E.
5.5. only.
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output omit-xml-declaration="yes" method="html"/>
<xsl:template match="DOCUMENT">
<html><head>
<style>
#tipposition { position: relative; left: 10; top: 10;
z-index: 1; background-color: yellow;}
</style>
<script>
function TipOn(obj)
{
obj.style.color="yellow";
}
function TipOff(obj)
{
obj.style.color="black";
}
</script>
</head>
<body>
<xsl:for-each select="FILE/BLOCK/*">
<xsl:if test="position()!=last()">
<span onMouseOver="TipOn(this)"
onMouseOut="TipOff(this)">
<xsl:value-of select="."/>
</span><br/>
</xsl:if>
</xsl:for-each>
--- <BR>
<BR>
</BODY></html>
</xsl:template>
</xsl:transform>
Regards
Bill Crawley
View Cart
