Search code examples
javascriptjavadojotooltipdijit.form

Attach content of a div inside tooltip


I have a div previewBox with one inputBox(input) and one Button(byUser ) I am trying to connect the tooltip to prevBtn, and I want my inputbox and button inside my tooltip.I know how to connect the tooltip to a div, but I am confused on how to insert the inputbox to the tooltip. If we can add an input box to a tooltip, please provide the necessary information. Thank you.

var prevBtn = dojo.create("span", {innerHTML:"<a></a>Preview", className:"txtLink icon search"}, btnWrapr1);
var previewBox = dojo.create('div', { className: 'prevBox'}, this.rootNode);
            var input = new dijit.form.TextBox({
                required:true, 
                value: "",
                maxLength: 32,
                style: { width: 100+'px' } 
            }).placeAt(previewBox);
            var byUser = new at.common.form.Button({
                label: "Preview",
                onClick: dojo.hitch(this, function() {
                    //TODO
                })          
            }).placeAt(previewBox);  
            var tt = new dijit.Tooltip({
                connectId: [prevBtn],
                position: ['above'],
                getContent:[input]          
            });

I can provide any further details if there is any confusion.Thanks


Solution

  • This should help

    addTooltip: function(tt, message) {
                var thisObj = this;
                var btt = new dijit.Tooltip({
                  label: message,
                  connectId: tt,
                  position: ['above']
                });      
            var previewBox = dojo.create('div', { className: 'prevBox'}, tt);
                 var input = new dijit.form.TextBox({
                        required:true, 
                        value: "",
                        maxLength: 32,
                        style: { width: 100+'px' } 
                    }).placeAt(previewBox);
                  var byUser = new dijit.form.Button({
                        label: "Preview",
                        onClick: dojo.hitch(this, function() {
                            //TODO
                        })          
                    }).placeAt(previewBox); 
    
               dojo.connect(this, "onMouseOver", this, function(evt) { 
          this.cancelTooltip = false;
          window.setTimeout( function(){ 
            if (!thisObj.cancelTooltip) 
              btt.open(previewBox); }, 400);
        });
                dojo.connect(this, "onMouseDown", this, function(evt) { 
                    this.cancelTooltip = true;
                    window.setTimeout( function(){ btt.close(); }, 100);      
                  });
                dojo.connect(this, "onMouseLeave", this, function(evt) { 
                  this.cancelTooltip = true;
                  window.setTimeout( function(){ btt.close(); }, 1000);      
                });
              },