Like the title says i want to be able to display the tooltip close to the text, currently it is displayed far away in the cell.

Tobe noted the tooltip positions correctly for large text, only fails for small text.

In DOJO How can i position the tooltip close to the text?

I have this bit of code snippet that display the tooltip in the grid cells.

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

Like the title says i want to be able to display the tooltip close to the text, currently it is displayed far away in the cell.

Tobe noted the tooltip positions correctly for large text, only fails for small text.

In DOJO How can i position the tooltip close to the text?

I have this bit of code snippet that display the tooltip in the grid cells.

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

• javascript
• dojo

Share Improve this question Follow edited Sep 10, 2012 at 19:05 user244394 asked Sep 7, 2012 at 22:39 user244394user244394 13.5k2525 gold badges8484 silver badges142142 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The tooltip is placed around the cell, i.e. <td> elements in HTML, not the text. There are two ways out:

A. Use formatters to wrap text into an element and place Tooltip to this child element of the table cell.

B. Place Tooltip above the cell:

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

See how both A & B work at jsFiddle: http://jsfiddle/phusick/7F5Cr/