This is an example on how to implement it:
1.- copy the file "main15.js" to same folder as the page
2.- Modify this file inserting (in line 20) -- document.onclick=mig_mo --
(this just avoid a small mouseover into selected row)
Functionality.- Any single-click on a selected-row's item show tooltip, another one (single-click) hide it.
I do it this way because don´t want a tooltip every click
Also can show header, html-links, and even Images
Hope this help someone
Thanks
Carlos
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<SCRIPT src="main15.js" ></SCRIPT>
<style>
#grid1 {height: 200px; border: 2px inset; background: white}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
</style>
</head>
<body>
<DIV id="tiplayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
<script>
var Data1 = [["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"]];
var columns1 = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setId("grid1");
obj.setRowProperty("count", 3);
obj.setColumnProperty("count", 5);
obj.setDataProperty("text", function(i, j){return Data1[i][j]});
obj.setColumnProperty("text", function(i){return columns1[i]});
var TuultipText = [];
var TuultipStyle = [];
var TipId="tiplayer" // should be the same as <div> tag's id
var FiltersEnabled = 1 // should be the set as to 1 if your going to use visual effects if not set to 0
var lastrowsel = -1;
var newrowsel = -1;
obj.setAction("click", function(src){
newrowsel = src.getRowProperty('index');
htm(); // to hide the tooltip (function inside main15.js)
if(newrowsel==lastrowsel){
TuultipText[0]=[columns1[src.getProperty('column/index')],src.getProperty('item/text')];
applytooltip();
lastrowsel = -1;
}
else{lastrowsel = src.getRowProperty('index');}
;});
// set & show tooltip
function applytooltip() {
// tooltip optional config. (see documentation)
TuultipStyle[0]=["white","black","","","",,"black","#ffffe1","","","",,,,,"",2,24,0.3,,2,"gray",1,2,-2,19];
mig_clay(); //can be commented it's only to support special efects (function inside main15.js)
stm(TuultipText[0],TuultipStyle[0]); // to fire/show the tooltip (function inside main15.js)
}
// write grid html to the page
document.write(obj);
</script>
</body>
</html>