setting tooltips on a cell by cell basis

Hi,

I would like to set tooltips on certain cells within a colum (but not every cell in the column)

Currently I am setting the tooltip as follows:

grid.getTemplate("column",cpos).setAttribute("title", function(){return this.getProperty("item/tooltip")});
grid.defineProperty("data/tooltip", function(rpos, cpos){return tooltiptxt;});
grid.setProperty("column/tooltip", function(rpos){return tooltiptxt});

This sets it for the entire column though. Is there any way to set it just for a specific cell? So that other cells in the same column / row have no tooltip.?

Thanks

Felix

Your function should return the tooltip text for the specific cell only and null or empty string for other cells (based on rpos, cpos arguments).

i alex,

thanks for the prompt reply. And like every one who uses activewidgets I am hugely impressed.

I think the issue I am having is that when I call refresh after the lines above every cell in the column has a tooltip..

I also have the same problem after I set the background colour on specific cells using the following code:

document.getElementById
("grid1.data.item:"+rpos+".item:"+cpos).style.background = "yellow";

The colour to use is decided based on arbitrary data attributes and not its value... So i set it when the cell is initially populated with data.

After the refresh() call the background colours get reset. Is that correct behaviour?

Thanks

Felix

To show tooltip on one cell only you should modify your tooltip function like this:

grid.defineProperty("data/tooltip", function(i, j){

if (i == rpos && j == cpos ) {

  return tooltiptxt;

}

else {

  return null;

}

});

The function will be called for each cell anyway, but only one cell will get the tooltip message.

The same should be done for changing the cell color - define color property on the data model and attach the style attribute (calling the item/color property) to the cell template.

first I would like to say thanks for doing great job..

I am working on a tool, in my tool I need dynamic tooltip for valid, cancel buttons and for delete, copy, insert icons..I have tried a lot by using below code..nut i was unable to succeded so you guys could you please help me..here I am sending my code..in this coding there are validate and cancel buttons for that i need tooltip can you please help me.. i need urgently..thank u.
raj

<%@ page language="java" import="java.lang.*,java.util.*" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html locale="true">
<head>
<html:base />
<LINK href="../../stylesheet/Pagination.css" rel="styleSheet" type="text/css">
<LINK href="../../stylesheet/ComplexDataTable.css" rel="styleSheet" type="text/css">



<title>Capace</title>
<meta name = "Generator" content = "Easy Struts Xslt generator for Eclipse (http://easystruts.sf.net).">
<SCRIPT language="JavaScript" >
var areaGlobalMaxLength=10;
function onLoad()
{
var area = document.getElementById("longDataValue");

//retrives windows args
MyArgs = window.dialogArguments;

//Updates label parmaters
var label = document.getElementById("LABEL");
label.innerHTML=MyArgs[2];

//Updates max size of the description.
areaGlobalMaxLength=MyArgs[3];

var value=MyArgs[0];
area.value= unescape(value);
var isEditable=MyArgs[1];

if(isEditable=='0'){
var tds=document.getElementById("buttons");
/*var button = document.getElementById("validateB");
button.src="../../images/Blank.png";
button.onclick="void('');";*/
tds.innerHTML='<html:image onclick="onCancel();" border="0" src="../../images/Cancel.png"/>';
area.disabled=true;

}

function onValidate()
{
var area = document.getElementById("longDataValue");
MyArgs=new Array(escape(area.value));
window.returnValue = MyArgs;
onCancel();
}

function show(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}

function onCancel()
{
this.close();
}

</SCRIPT>
<SCRIPT language="JavaScript" src="../../js/common.js">
</SCRIPT>
<STYLE TYPE="text/css">
.myStyle {
position: absolute;
visibility: hidden;
}
</STYLE>

</head>

<body onload="onLoad()" class="CDT">
<div align="center">

<TABLE align="center" class="POPUP">

<tr>
<td Id="LABEL" class="POPUP">

</td>
</tr>
<tr>
<td>
<TEXTAREA id="longDataValue" rows="5" cols="45" class="POPUP" onkeydown="areaTextCounter(this)" onkeyup="areaTextCounter(this);">
</TEXTAREA>
</td>
</tr>
<tr>
<td align="center" id="buttons">

<A HREF="javascript:onValidate();" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')" ><IMG id="validateB" onclick="onValidate();" src="../../images/Validate.png" border="0" ALT="Validate" title="Validate"/></A>

   

<A HREF="javascript:onValidate();" onMouseover="show('myLayer2')" onMouseout="hide('myLayer2')" > <html:image onclick="onCancel();" border="0" src="../../images/Cancel.png" ALT="Cancel" title="Cancel"/></A>

</td>
</tr>
</TABLE>
</div>
</body>
</html:html>

hi,

I dit it different I installed an mouseover event with an action only a mouseover effect on a particular column like this:
Advantage is that a normal tooltip can be insufficient because the cell contents is bigger than a standard tooltip.

Active.Templates.Text.prototype.setEvent ("onmouseover", onmouseover );

penmodelinggrid = Active.Controls.Grid.subclass();

openmodelinggrid.init = function () {
var obj = this.prototype;
obj.setAction("mouseover", function(src) {
var e = this.getOpenmodelingProperty ("currentevent");
var oobject = geteventsource (e);
var cid = oobject.id;
var nlen = cid.length;
var ccolumn11 = ".item:11";
var nlencolumn11 = ccolumn11.length;
var npos = cid.indexOf ( ccolumn11 );
if (npos != -1 && (npos == nlen - nlencolumn11) ) { // only mouse over effect in the twelfth column
var drag = document.getElementById("draggingPart");
if (drag == null) {
drag = document.createElement("DIV");
drag.setAttribute("id","draggingPart");
//drag.style.MozOpacity = 0.8;
//drag.style.filter = "alpha(opacity=50)";
drag.style.font = "menu";
drag.style.border = "1px solid threedlightshadow";
drag.style.backgroundColor = "#ffffff";
drag.style.width = "50%";
drag.style.width = "50%";
}

drag.innerHTML = cid + " " + src.getProperty("item/text");
drag.style.left = _pagePosX(e)+ 20; // offset +10 otherwise target == movingdata;
drag.style.top = _pagePosY(e);
drag.style.position = "absolute";

//var drag = document.createElement("DIV");
//drag.setAttribute("id","draggingPart");

/*-moz-opacity:0.5; filter:alpha(opacity=50);*/
document.body.appendChild(drag);
}
});
}

function onmouseover (e) {
if (this.setOpenmodelingProperty) {
e.cancelBubble = true;
e.returnValue = false;
this.setOpenmodelingProperty ("currentevent", e);
if (this.action) {
this.action ("mouseover");
}
}
}

of couse base on open modeling.

Hai man,

what you gave me the coding also i tried but I was unable to get the output can you please help me.. its urgent..

thanks for your help..

here I am sending my code again..

<%@ page language="java" import="java.lang.*,java.util.*" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html locale="true">
<head>
<html:base />
<LINK href="../../stylesheet/Pagination.css" rel="styleSheet" type="text/css">
<LINK href="../../stylesheet/ComplexDataTable.css" rel="styleSheet" type="text/css">

<title>Capace</title>
<meta name = "Generator" content = "Easy Struts Xslt generator for Eclipse (http://easystruts.sf.net).">
<SCRIPT language="JavaScript" >
var areaGlobalMaxLength=10;
function onLoad()
{
var area = document.getElementById("longDataValue");

//retrives windows args
MyArgs = window.dialogArguments;

//Updates label parmaters
var label = document.getElementById("LABEL");
label.innerHTML=MyArgs[2];

//Updates max size of the description.
areaGlobalMaxLength=MyArgs[3];

var value=MyArgs[0];
area.value= unescape(value);
var isEditable=MyArgs[1];

if(isEditable=='0'){
var tds=document.getElementById("buttons");
/*var button = document.getElementById("validateB");
button.src="../../images/Blank.png";
button.onclick="void('');";*/
tds.innerHTML='<html:image onclick="onCancel();" border="0" src="../../images/Cancel.png"/>';
area.disabled=true;

}

function onValidate()
{
var area = document.getElementById("longDataValue");
MyArgs=new Array(escape(area.value));
window.returnValue = MyArgs;
onCancel();
}

var uagent = navigator.userAgent;
var appver = navigator.appVersion.substring(0,1);

function showTip(ctrl, tiptext) {
var tipdiv;

if (uagent.indexOf("MSIE") != -1) {
if (appver > 3) {
// in IE all we need to do is set the "title" attribute
ctrl.title = tiptext;
}
} else {
if ((uagent.indexOf("Mozilla") != -1) && (appver > 3)) {
tipdiv = document.layers["tooltip"];

// set the tooltip text
tipdiv.document.open();
tipdiv.document.write("<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2 bordercolor=black><TR><TD BGCOLOR=FFFFCC>");
tipdiv.document.write("<FONT FACE=Verdana, Arial, Helvetica SIZE=-2>");
tipdiv.document.write(tiptext);
tipdiv.document.write("</FONT>");
tipdiv.document.write("</TD></TR></TABLE>");
tipdiv.document.close();

// set the tooltip location and show it
tipdiv.top = ctrl.y + 20;
tipdiv.left = ctrl.x + 10;
tipdiv.visibility = "show";
}
}
}

function hideTip() {
if ((uagent.indexOf("MSIE") == -1) && (uagent.indexOf("Mozilla") != -1) && (appver > 3)) {
// only do this for NN4+
document.layers["tooltip"].visibility = "hidden";
}
}

function onCancel()
{
this.close();
}

</SCRIPT>
<SCRIPT language="JavaScript" src="../../js/common.js">
</SCRIPT>
</head>

<body onload="onLoad()" class="CDT">
<div id="tooltip"></div>
<div align="center">

<TABLE align="center" class="POPUP">

<tr>
<td Id="LABEL" class="POPUP">

</td>
</tr>
<tr>
<td>
<TEXTAREA id="longDataValue" rows="5" cols="45" class="POPUP" onkeydown="areaTextCounter(this)" onkeyup="areaTextCounter(this);">
</TEXTAREA>
</td>
</tr>
<tr>
<td align="center" id="buttons">
<A HREF="#" onMouseOver="showTip(this, 'Validate')" onMouseOut="hideTip()" onclick="onValidate();"> <IMG id="validationB" src="../../images/Validate.png" border="0"/></A>
   

<A HREF="#" onMouseOver="showTip(this, 'Cancel')" onMouseOut="hideTip()" onclick="onCancel();"><html:image src="../../images/Cancel.png" border="0"/></A>

</td>
</tr>
</TABLE>
</div>
</body>
</html:html>

Hi alex,
I need the tooltip code.
can u explain how ?

please reply me.

thanks n advance

I did not manage to get cell tooltip work. I am getting only header tooltips. Looks like data/tooltip does not work in 1.02. Can you help me?

Forum search