如何將dojo工具提示貼近文本？

就像標題所說，我想能夠顯示靠近文本的工具提示，目前它顯示在很遠的單元格中。如何將dojo工具提示貼近文本？

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

來源

2012-09-07 user244394

工具提示放置在單元格周圍，即HTML中的<td>元素，而不是文本。有兩種方法：

A.使用formatters將文本包裝到元素中，並將Tooltip放置到表格單元的此子元素。

enter image description here

B.小區廣場Tooltip以上：

enter image description here

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

查看如何在兩者一的jsfiddle &乙工作：http://jsfiddle.net/phusick/7F5Cr/

來源

2012-09-08 08:32:47 phusick

我正在和錯誤，當我運行你的例子 – user244394

是的，你可以添加代碼和它工作。它比onCellMouseOver更加輕量級，而且可能更快。您能更具體地瞭解您遇到的錯誤嗎？我的意思是瀏覽器，版本，OS。我只是測試了jsFiddle代碼，它在Chrome 21,23和Chrome for iPad中無錯誤地運行; Firefox 15和16 beta 2; IE 9 & 10; Opera 12;適用於iPad的Safari 5.1.7和Safari;適用於Android和iPad的Dolphin。 – phusick

我也注意到它不適用於IE9版本9.0.0和Firefox – user244394

如何將dojo工具提示貼近文本？

回答

相關問題