如何将dojo工具提示放在文本附近？

Question

就像标题所说我希望能够在文本附近显示工具提示,目前它显示在单元格的远处.

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;
                }
            });
        ...

Answer 1

工具提示放在单元格周围,即<td>HTML中的元素,而不是文本.有两种方法:

A.使用格式化程序将文本换行到元素并放置Tooltip到表格单元格的子元素.

B.放置Tooltip在细胞上方:

var gridTooltip = new Tooltip({
    connectId: "grid1",
    selector: "td",
    position: ["above"],
    getContent: function(matchedNode){
        return matchedNode.textContent;
    }
});

看看A&B如何在jsFiddle工作:http://jsfiddle.net/phusick/7F5Cr/