Skip to Content | Skip to Navigation


dijit.TooltipDialog

Authors:Bill Keese, Nikolai Onken, Marcus Reimann
since:V0.9

A variant on Dialog Box is dijit.TooltipDialog.

Introduction

The dijit.TooltipDialog displays a tooltip that contains form elements (like a dialog).

Although both Dialog and TooltipDialog are modal, TooltipDialog can be closed by clicking anywhere on the screen, whereas for Dialog you must click on the [x] mark of the Dialog.

A TooltipDialog can only be opened as a drop down from another widget, usually dijit.form.DropDownButton.

Examples

Programmatic example

The first example shows how to create a TooltipDialog and DropDownButton programmatically.

<script type="text/javascript">
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.TooltipDialog");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");

    dojo.ready(function(){
        var dialog = new dijit.TooltipDialog({
            content:
                '<label for="name">Name:</label> <input data-dojo-type="dijit.form.TextBox" id="name" name="name"><br>' +
                '<label for="hobby">Hobby:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby" name="hobby"><br>' +
                '<button data-dojo-type="dijit.form.Button" type="submit">Save</button>'
        });

        var button = new dijit.form.DropDownButton({
            label: "show tooltip dialog",
            dropDown: dialog
        });
        dojo.byId("dropdownButtonContainer").appendChild(button.domNode);
    });
</script>
<div id="dropdownButtonContainer"></div>

A TooltipDialog may be popped up from any node.

<script type="text/javascript">
    dojo.require("dijit.TooltipDialog");

    dojo.ready(function(){
        var myTooltipDialog = new dijit.TooltipDialog({
            id: 'myTooltipDialog',
            style: "width: 300px;",
            content: "<p>I have a mouse leave event handler that will close the dialog.",
            onMouseLeave: function(){
                dijit.popup.close(myTooltipDialog);
            }
        });

        dojo.connect(dojo.byId('thenode'), 'onmouseenter', function(){
            dijit.popup.open({
                popup: myTooltipDialog,
                around: dojo.byId('thenode')
            });
        });
    });
</script>
<div id="thenode">Move the mouse over me to pop up the dialog.</div>

Declarative markup

As usual you can create the TooltipDialog and DropDown button widget declaratively using the data-dojo-type attribute. When created declaratively the DropDownButton node has two children, one for the label of the button, and the other for the drop-down widget that’s displayed when you press the button.

Here’s one displaying a TooltipDialog:

<script type="text/javascript">
  dojo.require("dijit.form.DropDownButton");
  dojo.require("dijit.TooltipDialog");
  dojo.require("dijit.form.TextBox");
  dojo.require("dijit.form.Button");
</script>
<div data-dojo-type="dijit.form.DropDownButton">
  <span>Register</span>
  <div data-dojo-type="dijit.TooltipDialog">
     <label for="name2">Name:</label> <input data-dojo-type="dijit.form.TextBox" id="name2" name="name2"><br>
     <label for="hobby2">Hobby:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby2" name="hobby2"><br>
     <button data-dojo-type="dijit.form.Button" type="submit">Save</button>
  </div>
</div>

Accessibility

Keyboard

Action Key
Navigate to next focusable element in the tooltip dialog tab
Navigate to previous focusable element in the tooltip dialog shift-tab
Close the tooltip dialog escape

See the detailed Keyboard Navigation Notes and Known Issues in dijit.Dialog