就像标题说的那样,我希望能够在靠近文本的地方显示工具提示,目前它在单元格中显示得很远。
Tobe 指出,对于大文本,工具提示位置正确,仅对小文本失败。
在 DOJO 中,如何将工具提示定位在靠近文本的位置?
我有这段代码片段在网格单元格中显示工具提示。
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;
}
});
...