Geek Answers Handbook

Dojo - How to program a ToolTip dialog on a link

As the name says. I want to create a TooltipDialog after I click on the link and load the custom content into this dialog box. The tooltip body is a complete placeholder, I just did not do any server logic to handle this. So far I have come to this:

            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>

It’s not even about how to load content into a dialog, but how to open it first?

After I encountered the error and trial and 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 works somehow. ToolTipDialog opens, but .. I have to double-click, and I can not close the dialog after clicking outside it or after the mouse.

Ok, let's start looking like dev log, but hopefully this will save others, some headchace:

I finally managed to open it where I want:

            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>

, Asp.NET MVC. .

+5
2

afaik , , tbh:-P

-, dijit.popup.open() close(), . . , PreviewThread , , , , :

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

, , , - . , dijit -, Jaxi.tooltip, . ( : dijit.TooltipDialog , ). - , .

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

, , , , .

- dijit.form.DropDownButton, , . , DropDownButton Firebug, , . FYC, DropDownButton.

+2

:

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

, .

API : http://dojotoolkit.org/api/

+2

More articles:


All Articles