Here's a method to create a custom bubble help popup window (as shown in the video) in a grid component :
http://screencast.com/t/zou1XBMoOC21
1. Add a static text control with property "Static text" as follows:
<div id="floatingMessage" style="display:none; position:absolute; color:white;
background: #2e2e2e; border: solid 1px #ccc; padding:5px; font:Tahoma 8pt;">
</div>
1.jpg
2. Put the following javascript in the onMouseMove event of the field where the popup is to take place as follows:
var msg = "AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber});
var ele = $('floatingMessage');
ele.innerHTML = msg;
ele.style.display = '';
positionBubbleHelp(ele,event);
2.jpg
3. To clear the popup window when mouse moves our of the field, place this javascript in the onMouseout event as follows:
var ele = $('floatingMessage');
ele.style.display='none';
3.jpg
4. Create a Javascript function as follows (changing the offsetX & offsetY values changes the placement of the popup window on the screen):
function positionBubbleHelp(ele,event) {
var coords = $e.getCoors(event);
var offsetY = -40;
var offsetX = -175;
ele.style.top = (coords.clientY + offsetY) + 'px';
ele.style.left = (coords.clientX + offsetX) + 'px';
}
4.jpg
NOTE:
To use line breaks add the following between fields
+"<html><br></html>"+
ie) var msg = "AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber})+"<html><br></html>"+"AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber});
P.S.
I can not take credit for this code. I got it from Gary Flanigan on this forum and modified it slightly to fit my own needs. Thanks Gary.
Hope this will be of help to others too.
Stephen
http://screencast.com/t/zou1XBMoOC21
1. Add a static text control with property "Static text" as follows:
<div id="floatingMessage" style="display:none; position:absolute; color:white;
background: #2e2e2e; border: solid 1px #ccc; padding:5px; font:Tahoma 8pt;">
</div>
1.jpg
2. Put the following javascript in the onMouseMove event of the field where the popup is to take place as follows:
var msg = "AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber});
var ele = $('floatingMessage');
ele.innerHTML = msg;
ele.style.display = '';
positionBubbleHelp(ele,event);
2.jpg
3. To clear the popup window when mouse moves our of the field, place this javascript in the onMouseout event as follows:
var ele = $('floatingMessage');
ele.style.display='none';
3.jpg
4. Create a Javascript function as follows (changing the offsetX & offsetY values changes the placement of the popup window on the screen):
function positionBubbleHelp(ele,event) {
var coords = $e.getCoors(event);
var offsetY = -40;
var offsetX = -175;
ele.style.top = (coords.clientY + offsetY) + 'px';
ele.style.left = (coords.clientX + offsetX) + 'px';
}
4.jpg
NOTE:
To use line breaks add the following between fields
+"<html><br></html>"+
ie) var msg = "AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber})+"<html><br></html>"+"AnyTextHere: "+{Grid.object}.getValue('G','FIELDNAME',{grid.rowNumber});
P.S.
I can not take credit for this code. I got it from Gary Flanigan on this forum and modified it slightly to fit my own needs. Thanks Gary.
Hope this will be of help to others too.
Stephen