Dojo - How to position tooltip close to text?
- by user244394
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;
};
