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