2

就像标题说的那样，我希望能够在靠近文本的地方显示工具提示，目前它在单元格中显示得很远。

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

1 回答 1

6

工具提示位于单元格周围，即<td>HTML 中的元素，而不是文本。有两种出路：

A. 使用格式化程序将文本包装到一个元素中并放置Tooltip到表格单元格的这个子元素中。

在此处输入图像描述

B. 放置Tooltip在单元格上方：

在此处输入图像描述

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

在 jsFiddle 上查看 A 和 B 如何工作：http: //jsfiddle.net/phusick/7F5Cr/

于 2012-09-08T08:32:47.390 回答