Select to view content in your preferred language

Tooltip Connector Placement - dijit.tooltipDialog

3346
4
04-09-2013 10:23 AM
bobcarr
New Contributor III
This past week, implementing a tooltipDialog popup similar to the ArcGIS sample posted at: http://developers.arcgis.com/en/javascript/samples/fl_hover/, I am encountering the same sort of tooltip connector displacement shown in the sample, and unsure how to correct it.  At the sample page, opening a tooltip dialog shows the tooltip connector rendered at the lower-left corner of the dialog, and not connected to the feature being displayed.

Below is the code we are using for a similar tooltip dialog.

wsDialog = new dijit.TooltipDialog({ 
    id: "wsDialog", 
    style: "width: 375px; font: normal normal normal 10pt Helvetica;z-index:100",
    onMouseLeave: function(){
        dijit.popup.close(wsDialog);
        map.graphics.clear();
        window.clearTimeout(timeOutAction);
    }
}); 

wsDialog.startup(); 
dojo.connect(dijit.byId("wsDialog"),'onShow',function(){
    dijit.byId("wscontpane").resize();
});
          
maphandles.push(dojo.connect(FL_fs_pr_ws,"onMouseOut",function() {
      window.clearTimeout(timeOutAction);
}));

//listen for when the onMouseOver event fires on the prioritywatershedsLayer 
//when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer 
maphandles.push(dojo.connect(FL_fs_pr_ws, "onMouseOver", function(evt) { 
      if (timeOutAction !== undefined) {
          // if timeOutAction is not null or undefined, clear it out.
          window.clearTimeout(timeOutAction);
      }
      timeOutAction = window.setTimeout(function () {
          map.graphics.clear();
          var highlightGraphic = new esri.Graphic(evt.graphic.geometry,pr_ws_hiliteSymbol); 
          map.graphics.add(highlightGraphic); 
            
         var content = getTextContent(evt.graphic);
         wsDialog.setContent(content); 
         dojo.style(wsDialog.domNode, "opacity", 0.85); 
         dijit.popup.open({popup: wsDialog, x:evt.pageX,y:evt.pageY}); 
              },500);
})); 


Looking at the CSS, I saw no settings that seemed to affect connector placement.  A screen capture showing tooltip connector displacement is attached.

Thanks.
0 Kudos
4 Replies
SteveCole
Frequent Contributor
I just got rid of mine. It was a bear to find in the CSS but I finally did. Here's what I had to add to my CSS file to finally eliminate it:

.claro  .dijitTooltipConnector { background:none !important; }


[I was using the CLARO dojo style. Change that reference to whatever style you're using]

Good luck!
Steve
0 Kudos
bobcarr
New Contributor III
Thanks, Steve.

I had also found the css class for the connector, but would prefer to keep it and have it correctly positioned.  Using it at other places in the map for tool and layer descriptions, the connector for the tooltip dialog is positioned correctly.
0 Kudos
AaronCurtiss
New Contributor
Were you able to find a solution to this problem? I'm having a similar problem with dijit.Tooltip on Firefox, where it does not seem to recognize the selectors so the tooltip is appearing at top left of the window. I believe this is due to the fact that the selectors are SVG elements and not vanilla HTML elements. I've been attempting to force 'correct' placement at or near the cursor's x/y coords but it's having no effect whatsoever.

Aaron
0 Kudos
bobcarr
New Contributor III
No solution yet.  I will revisit this today, possibly replacing the tooltipDialog with another widget.
0 Kudos