CODEWITHSUNDEEP
dialogdojo
Derick Schoonbee
Derick Schoonbee

Reputation: 3021

How do I use dijit.TooltipDialog on a div?

I would like to show a "drop down dialog" when I click my link/div.

So far have the following code:

    <html>
        <head>
            <script type="text/javascript" djConfig="isDebug: false, parseOnLoad: true" src="lib/dojo/dojo.js">
            </script>
            <link rel="stylesheet" type="text/css" href="lib/dojo/resources/dojo.css">
            <link rel="stylesheet" type="text/css" href="lib/dijit/themes/tundra/tundra.css">
            <script type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dijit.TooltipDialog");
                dojo.require("dijit.form.Form");
                dojo.require("dijit.form.Button");
                dojo.require("dijit.form.TextBox");
                dojo.require("dijit.form.DropDownButton");

                dojo.addOnLoad(function(){

                    console.log("Hello");
                });
            </script>
        </head>
        <body class="tundra">
            <!-- Login DIV -->
            <div id="login">
                <a href="#" title="">Login Link</a>
            </div>

                <div dojoType="dijit.TooltipDialog">
                    <span>Username:</span>
                    <div dojoType="dijit.form.TextBox">
                    </div>
                    <span>Password:</span>
                    <div dojoType="dijit.form.TextBox" type="password">
                    </div>
                    <button dojoType="dijit.form.Button" type="submit">
                        Login
                    </button>
                </div>

            <!-- Login Button -->
            <button dojoType="dijit.form.DropDownButton"">
                <span>Login Button</span>
                <div dojoType="dijit.TooltipDialog">
                    <span>Username:</span>
                    <div dojoType="dijit.form.TextBox">
                    </div>
                    <span>Password:</span>
                    <div dojoType="dijit.form.TextBox" type="password">
                    </div>
                    <button dojoType="dijit.form.Button" type="submit">
                        Login
                    </button>
                </div>
            </button>

        </body>
    </html>

How can I make my Login Link behave like Login Button? Or is there another way I can do this in Dojo?

Upvotes: 2

Views: 6400

Answers (2)

Meir
Meir

Reputation: 11

Anther way to do this, is by using DropDownButton, but replacing the css attributes associated with the button with a different style that will make the button look like an anchor.

Upvotes: 1

belzebu
belzebu

Reputation: 820

there is a nice post link -> tooltips on anchors

it's not for tooltipdialogs, but it simulates it's functionality.

-or-

<div id="login" dojoType="dijit.form.DropDownButton">
    <a href="#" title="">Login Link</a> 
    <div id="loginDialog" dojoType="dijit.TooltipDialog" style="display:none" >
        <span>Username:</span>
        <div dojoType="dijit.form.TextBox">
        </div>
        <span>Password:</span>
        <div dojoType="dijit.form.TextBox" type="password">
        </div>
        <button dojoType="dijit.form.Button" type="submit">
            Login
        </button>
    </div>

Upvotes: 1

Related Questions