Search code examples
selectdojotooltip

How to add "select" in dojo tooltipdialog content programmatically?


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>

Solution

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