Like the title says i want to be able to display the tooltip close to the text, currently it is displayed far away in the cell.
Tobe noted the tooltip positions correctly for large text, only fails for small text.
In DOJO How can i position the tooltip close to the text?
I have this bit of code snippet that display the tooltip in the
grid cells. Screenshot attached,
html
<div class="some_app claro"></div>
...
com.c.widget.EnhancedGrid = function ( aParent, options ) {
var
grid, options;
this.theParentApp = aParent;
dojo.require("dojox.
grid.EnhancedGrid");
dojo.require("dojox.
grid.enhanced.plugins.Menu");
dojo.require("dojox.
grid.enhanced.plugins.Selector");
dojo.require("dojox.
grid.enhanced.plugins.Pagination");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojo._base.xhr");
dojo.require("dojo.domReady!");
dojo.require("dojo.date.locale");
dojo.require("dojo._base.connect");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require('dijit.MenuSeparator');
dojo.require('dijit.CheckedMenuItem');
dojo.require('dijit.Tooltip');
dojo.require('dojo/query');
dojo.require("dojox.data.QueryReadStore");
// main initialization function
this.init = function( options ) {
var me = this;
// default options
var defaultOptions = {
widgetName: ' Enhancedgrid',
render: true, // immediately render the
grid
draggable: true, // disables column dragging
containerNode: false, // the
Node to hold the
Grid (optional)
mashupUrl: false, // the URL of the mashup (required)
rowsPerPage: 20, //Default number of items per page
columns: false, // columns (required)
width: "100%", // width of
grid
height: "100%", // height of
grid
rowClass: function (rowData) {},
onClick: function () {},
headerMenu: false, // adding a menu pop-up for the header.
selectedRegionMenu: false, // adding a menu pop-up for the rows.
menusObject: false, //object to start-up the menus using the plug-in.
sortInfo: false, // The column default sort
infiniteScrolling: false //If true, the enhanced
grid will have an infinite scrolling.
};
// merge user provided options
me.options = jQuery.extend( {}, defaultOptions, options );
// check we have minimum required options
if ( ! me.options.mashupUrl ){
throw ("You must supply a mashupUrl");
}
if ( ! me.options.columns ){
throw ("You must supply columns");
}
// make the column for formatting based on its data type.
me.preProcessColumns();
// create the Contextual Menu
me.createMenu();
// create the
grid object and return
me.createGrid();
};
// Loading the data to the
grid.
this.loadData = function () {
var me = this;
if (!me.options.infiniteScrolling) {
var xhrArgs = {
url: me.options.mashupUrl,
handleAs: "json",
load: function( data ){
var store = new dojo.data.ItemFileReadStore({ data : {items : eval( "data."+me.options.dataRoot)}});
store.fetch({
onComplete : function(items, request) {
if (me.
grid.selection !== null) {
me.
grid.selection.clear();
}
me.
grid.setStore(store);
},
onError : function(error) {
me.onError(error);
}
});
},
error: function (error) {
me.onError(error);
}
};
dojo.xhrGet(xhrArgs);
}
else {
dojo.declare('NotificationQueryReadStore', dojox.data.QueryReadStore, {
//
// hacked -- override to map to proper data structure
// from mashup
//
_xhrFetchHandler : function(data, request, fetchHandler, errorHandler) {
//
// TODO: need to have error handling here when
// data has "error" data structure
//
//
// remap data object before process by super method
//
var dataRoot = eval ("data."+me.options.dataRoot);
var dataTotal = eval ("data."+me.options.dataTotal);
data = {
numRows : dataTotal,
items : dataRoot
};
// call to super method to process mapped data and
// set rowcount
// for proper display
this.inherited(arguments);
}
});
var queryStore = new NotificationQueryReadStore({
url : me.options.mashupUrl,
urlPreventCache: true,
requestMethod : "get",
onError: function (error) {
me.onError(error);
}
});
me.
grid.setStore(queryStore);
}
};
this.preProcessColumns = function () {
var me = this;
var options = me.options;
for (i=0;i<this.options.columns.length;i++) {
if (this.options.columns[i].formatter==null) {
switch (this.options.columns[i].datatype) {
case "string":
this.options.columns[i].formatter = me.formatString;
break;
case "date":
this.options.columns[i].formatter = me.formatDate;
var todayDate = new Date();
var gmtTime = c.util.Date.parseDate(todayDate.toString()).toString();
var gmtval = gmtTime.substring(gmtTime.indexOf('GMT'),(gmtTime.indexOf('(')-1));
this.options.columns[i].name = this.options.columns[i].name + " ("+gmtval+")";
}
}
if (this.options.columns[i].sortDefault) {
me.options.sortInfo = i+1;
}
}
};
// create
GRID object using supplied options
this.createGrid = function () {
var me = this;
var options = me.options;
// create a new
grid
this.
grid = new dojox.
grid.EnhancedGrid ({
width: options.width,
height: options.height,
query: { id: "*" },
keepSelection: true,
formatterScope: this,
structure: options.columns,
columnReordering: options.draggable,
rowsPerPage: options.rowsPerPage,
//sortInfo: options.sortInfo,
plugins : {
menus: options.menusObject,
selector: {"row":"multi", "cell": "disabled" },
},
//Allow the user to decide if a column is sortable by setting sortable = true / false
canSort: function(col) {
if (options.columns[Math.abs(col)-1].sortable) return true;
else return false;
},
//Change the row colors depending on severity column.
onStyleRow: function (row) {
var
grid = me.grid;
var item =
grid.getItem(row.index);
if (item && options.rowClass(item)) {
row.customClasses += " " +options.rowClass(item);
if (grid.selection.selectedIndex == row.index) {
row.customClasses += " dojoxGridRowSelected";
}
grid.focus.styleRow(row);
grid.edit.styleRow(row);
}
},
onCellMouseOver: function (e){
// var pos = dojo.position(this, true);
// alert(pos);
console.log( e.rowIndex +" cell
node :"+ e.cellNode.innerHTML);
// var pos = dojo.position(this, true);
console.log( " pos :"+ e.pos);
if (e.cellNode.innerHTML!="") {
dijit.showTooltip(e.cellNode.innerHTML, e.cellNode);
}
},
onCellMouseOut: function (e){
dijit.hideTooltip(e.cellNode);
},
onHeaderCellMouseOver: function (e){
if (e.cellNode.innerHTML!="") {
dijit.showTooltip(e.cellNode.innerHTML, e.cellNode);
}
},
onHeaderCellMouseOut: function (e){
dijit.hideTooltip(e.cellNode);
},
});
// ADDED CODE FOR TOOLTIP
var gridTooltip = new Tooltip({
connectId: "grid1",
selector: "td",
position: ["above"],
getContent: function(matchedNode){
var childNode = matchedNode.childNodes[0];
if(childNode.nodeType == 1 && childNode.className == "user") {
this.position = ["after"];
this.open(childNode);
return false;
}
if(matchedNode.className && matchedNode.className == "user") {
this.position = ["after"];
} else {
this.position = ["above"];
}
return matchedNode.textContent;
}
});
...
//Construct the
grid
this.buildGrid = function(){
var datagrid = new com.emc.widget.EnhancedGrid(this,{
Url: "/dge/api/-resultFormat=json&id="+encodeURIComponent(idUrl),
dataRoot: "Root.ATrail",
height: '100%',
columns: [
{ name: 'Time', field: 'Time', width: '20%', datatype: 'date', sortable: true, searchable: true, hidden: false},
{ name: 'Type', field: 'Type', width: '20%', datatype: 'string', sortable: true, searchable: true, hidden: false},
{ name: 'User ID', field: 'UserID', width: '20%', datatype: 'string', sortable: true, searchable: true, hidden: false }
]
});
this.
grid = datagrid;
};
