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.

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);
});
<div id="dropdownButtonContainer"></div>

A TooltipDialog may be popped up from any node.

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

dojo.require("dijit.form.DropDownButton");
dojo.require("dijit.TooltipDialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
<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

Error in the documentation? Can’t find what you are looking for? Let us know!