Avoid overlapping between a Dijit Menu and its target div

Question

I have the following code example in fiddle.net here of a Dijit.Menu and a div. The Menu appears with a left click, my problem is that the Menu overlaps (or covers, hides) the content of the target div and users cannot read its content when making comparisons with the alternatives presented in the Menu, see the figure below.

So is there a way to make the Menu appear without overlapping the div content, so that the div content could be seen while browsing the menu items, maybe positioning the menu below or above the div, as in the following figure.

Answer 1

This can be achieved with some javascript attached to the onOpen event that is triggered when the popupMenu is shown.

The code should get the position and the height of the clicked element and calculate the position where the menu should be placed:

• x: is the x position of trigger element
• y: is the y position summed up with the height of the trigger element

Use these coordinates to set the left and top style attributes of the popup menu holder element:

pMenu.connect(pMenu, 'onOpen', function () {
    var position = dojo.position(this.currentTarget, true);   
    domStyle.set(this.domNode.parentNode, {
       left: position.x + "px",
       top: (position.y + position.h) + "px"
    });
});

Here is a jsfiddle with the popup menu positioned as in your image

Answer 2

You can use TooltipDialog, here is a jsfiddle based on the one you provided.