- From: Vivien Lacourba <vivien@w3.org>
- Date: Mon, 18 Jul 2005 17:55:06 +0200
- To: Fontolliet Loic <loic.fontolliet@insa-lyon.fr>, Stéphane Hlavacek <stephane.hlavacek@insa-lyon.fr>
- Cc: www-archive@w3.org
Hi Loic, Stephane,
Here is how the tooltips are handled in AWStats:
* In the CSS:
[[
<style type="text/css">
<!--
.CTooltip { position:absolute; top: 0px; left: 0px; z-index: 2; width: 380px; visibility:hidden; font: 8pt 'MS Comic Sans','Arial',sans-serif; background-color: #FFFFE6; padding: 8px; border: 1px solid black; }
//-->
]]
So the Tooltip will appear at the top right corner of your page (by default it's hidden).
* In the <body>: Tooltip definition (they have an id of the form 'tt(N)N') and also javascript function that shows the tooltip:
[[
<div class="CTooltip" id="tt5">
This piece of information refers to the amount of data downloaded by all <b>pages</b>, <b>images</b> and <b>files</b> within your site.<br />
Units are in KB, MB or GB (KiloBytes, MegaBytes or GigaBytes)
</div>
...
<script language="javascript" type="text/javascript">
function ShowTip(fArg)
{
var tooltipOBJ = (document.getElementById) ? document.getElementById('tt' + fArg) : eval("document.all['tt" + fArg + "']");
if (tooltipOBJ != null) {
var tooltipLft = (document.body.offsetWidth?document.body.offsetWidth:document.body.style.pixelWidth) - (tooltipOBJ.offsetWidth?tooltipOBJ.offsetWidth:(tooltipOBJ.style.pixelWidth?tooltipOBJ.style.pixelWidth:380)) - 30;
var tooltipTop = 10;
if (navigator.appName == 'Netscape') {
tooltipTop = (document.body.scrollTop>=0?document.body.scrollTop+10:event.clientY+10);
tooltipOBJ.style.top = tooltipTop+"px";
tooltipOBJ.style.left = tooltipLft+"px";
}
else {
tooltipTop = (document.body.scrollTop>=0?document.body.scrollTop+10:event.clientY+10);
tooltipTop = (document.body.scrollTop>=0?document.body.scrollTop+10:event.clientY+10);
if ((event.clientX > tooltipLft) && (event.clientY < (tooltipOBJ.scrollHeight?tooltipOBJ.scrollHeight:tooltipOBJ.style.pixelHeight) + 10)) {
tooltipTop = (document.body.scrollTop?document.body.scrollTop:document.body.offsetTop) + event.clientY + 20;
}
tooltipOBJ.style.left = tooltipLft;
tooltipOBJ.style.top = tooltipTop;
}
tooltipOBJ.style.visibility = "visible";
}
}
function HideTip(fArg)
{
var tooltipOBJ = (document.getElementById) ? document.getElementById('tt' + fArg) : eval("document.all['tt" + fArg + "']");
if (tooltipOBJ != null) {
tooltipOBJ.style.visibility = "hidden";
}
}
</script>
]]
* In your table headers:
[[
<td onmouseover="ShowTip(5);" onmouseout="HideTip(5);">Bandwidth</td>
]]
As I was writing this email I searched for a cleaner solution, I found
that you could do someting similar without javascript just by using some
of the CSS magic.
Detailed explaination are at:
http://meyerweb.com/eric/css/edge/popups/demo.html
Vivien
--
Vivien Lacourba vivien@w3.org
World Wide Web Consortium http://www.w3.org
W3C Systems Team
Received on Monday, 18 July 2005 15:55:19 UTC