2

タイトルのように、テキストの近くにツールチップを表示できるようにしたいのですが、現在はセルの遠くに表示されています。

大きなテキストの場合はツールチップの位置が正しく、小さなテキストの場合のみ失敗することに注意してください。

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の要素です。2つの方法があります。

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 に答える