I want to display dojo select
inside a dijit/TooltipDialog. The items of the dojo select
are dynamically loaded. So I want to add this select
programmaticaly. The content of TooltipDialog can be an object but select needs a domNode to be held. The code is :
<head>
<script>
require([
"dojo/parser",
"dijit/form/Select",
"dijit/TooltipDialog",
"dojo/on",
"dojo/dom",
"dojo/_base/lang",
"dijit/popup",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){
parser.parse();
var t={mySel:null};
var store = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store });
t.mySel = new Select({
store: os
}, "ttt");
var myTooltipDialog = new TooltipDialog({
content: t,
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){
popup.open({
popup: myTooltipDialog,
orient: ["above-centered","above","below"],
around:dom.byId('mmm')
});
t.mySel.startup();
}));
t.mySel.on("change", function(){
console.log("my value: ", this.get("value"))
})
})
</script>
</head>
<body class="claro">
<div id="ttt" > tttt</div><br>
<div id="mmm" > tttt</div><br>
</body>
You are assignign an object t the tooltip content not a domenode
so try to make these change :
var myTooltipDialog = new TooltipDialog({
content: t.mySel.domNode,
onMouseLeave: function() {
popup.close(myTooltipDialog);
}
}