Dojo - How to programatically create ToolTip Dialog on link click

Question

As the title says. I want to create TooltipDialog, after I click link and load custom content into that dialog. The tooltip body is complete placeholder, I just haven't done any server logic to handle this. So far i got to this point:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
            });
        },

<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" class="preview-thread" id="@tp.ToString()">Preview</a>

The point is not even how to load content, into dialog, but how to open it in the first place ?

After more googling and trial & error I finally got to this:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                closable: true
            });
            dojo.query(".thread-preview").connect("onclick", function () {
                dijit.popup.open({ popup: tooltip, around: this });
            });            
        },

It's somehow working. ToolTipDialog opens, but.. I have to click twice and and I can't close dialog after click outside it, or after mouseleave.

Ok this, going to start look like dev log, but hopefully it will save others some headchace:

I finally managed to popup it where I want to:

            PreviewThread: function (ThreadID) {

            var tooltip = new dijit.TooltipDialog({
                href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                closable: true
            });

            dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
        },
<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" id="@tp.ToString()" >Click Me</a>

Note that I'm using Asp .NET MVC. Now only thing left is to close damn thing in user friendly manner..

Answer 1

There are afaik two ways you can do this, and neither one is very elegant tbh :-P

The first is to use dijit.popup.open() and close() to show and hide the dialog. In this case, you have to provide the desired coordinates. I see that you only provide your PreviewThread function with a thread id, but assuming you also tack on the event object, you can do:

PreviewThread: function (ThreadID, event) {

    Jaxi.tooltip = new dijit.TooltipDialog({
        href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
    });
    dijit.popup.open({
        popup: Jaxi.tooltip, 
        x: event.target.pageX, 
        y: event.target.pageY
    });  
}

When you're using this method, you also have to manually close the popup, for example when something outside is clicked. This means you need a reference to your tooltip dijit somewhere, for example Jaxi.tooltip like I did above. (Side note: dijit.TooltipDialog is actually a singleton, so there won't be lots of hidden tooltips around your page). I usually end up with something like this for hiding my tooltip dialogs.

dojo.connect(dojo.body(), "click", function(event)
{
     if(!dojo.hasClass(event.target, "dijitTooltipContents"))
         dijit.popup.close(Jaxi.tooltip);
});

This may of course not work for you, so you'll have to figure out something that suits your particular arrangement.

The second way is to use the dijit.form.DropDownButton, but styling it as if it was a link. I'm not going to go into details on this, just instantiate a DropDownButton on your page and use Firebug to tweak it until it looks like your regular links. FYC, link to DropDownButton reference guide.

Answer 2

You may try:

PreviewThread: function (ThreadID) {

        var tooltip = new dijit.TooltipDialog({
            href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
            closable: true,
            onMouseLeave: function(){dijit.popup.close(tooltip);}
        });

        dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},

This will close the dialog as soon as you moove the mouse out of the dialog.

Check the API for all possible events: http://dojotoolkit.org/api/