3.2.0
Forum Demo Guide API Store

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
Felix
June 24,
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).
Alex (ActiveWidgets)
June 24,
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
Felix
June 25,
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.
Alex (ActiveWidgets)
June 26,
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">

<!-- <link rel="stylesheet" href="tooltip.css" 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>

&nbsp;&nbsp;&nbsp;

<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>

appalaraju malipeddi
August 8,
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.
John Ophof
August 8,
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>
&nbsp;&nbsp;&nbsp;

<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>
appalaraju malipeddi
August 9,
Hi alex,
I need the tooltip code.
can u explain how ?

please reply me.

thanks n advance
jeeva
October 11,
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?
MK
December 13,

This topic is archived.

See also:

Row Height for Multi-Line Data Cells Dean (22)
set cell selection color Glenn Leidy (10)
setting a color for a single cell Adi Katz (8)
How do you set a columns width? GB (15)
Change cell color based on another column value John Arthur (10)
how to set row or cell tooltip ? Creatxr (2)
Edit cells (9)
How to change color for a specific cell in grid Kiran I S S (9)
Is there a way to set the back color of one particular row header cell? Ana (4)
How can I put a image and text in a cell (9)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us