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.
html
<div class="some_app claro"></div>
.
..
this.createGrid = function () {
var me = this;
var options = me.options;
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" },
},
canSort: function(col) {
if (options.columns[Math.abs(col)-1].sortable) return true;
else return false;
},
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;
}
});
...
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.
html
<div class="some_app claro"></div>
.
..
this.createGrid = function () {
var me = this;
var options = me.options;
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" },
},
canSort: function(col) {
if (options.columns[Math.abs(col)-1].sortable) return true;
else return false;
},
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;
}
});
...
The tooltip is placed around the cell, i.e. <td> elements in HTML, not the text. There are two ways out:
A. Use formatters to wrap text into an element and place Tooltip to this child element of the table cell.
B. Place Tooltip above the cell:
var gridTooltip = new Tooltip({
connectId: "grid1",
selector: "td",
position: ["above"],
getContent: function(matchedNode){
return matchedNode.textContent;
}
});
See how both A & B work at jsFiddle: http://jsfiddle/phusick/7F5Cr/