Question

I have a Dojo tooltip that’s been initialized and it works perfectly find when hovering over the desired node. The problem is that once the tooltip shows up for the first time, when i’m no longer hovering over the “tooltip” area then the tooltip appears in the top-left part of the page. How do I hide the tooltip when i’m out of the “hover” area for the tooltip.

Here is my initialization bit of code:

new dijit.Tooltip({
  connectId: [this.myCloseContainerId],
  label: this.substitute(this.tooltipTemplate, {
    tooltipText: this.closeTooltipText 
  }),
  position: ["below"], 
  showDelay: 50
});

All of the “variables” are set and defined.

Answer 1

The solution is the following. Since when Dojo positions the tooltip it sets the CSS opacity to 1, then the easiest solution is to set the opacity to 0 by default, i.e., in your own css define the following rule:

.dijitTooltip {
  opacity: 0;
  filter: alpha(opacity=0); /* this is for IE support */
}

This seems to have resolved the issue.