topic Tooltip Connector Placement - dijit.tooltipDialog in ArcGIS JavaScript Maps SDK Questions

Tooltip Connector Placement - dijit.tooltipDialog

bobcarr — Sun, 12 Dec 2021 01:06:35 GMT

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.

Re: Tooltip Connector Placement - dijit.tooltipDialog

SteveCole — Tue, 09 Apr 2013 21:08:18 GMT

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

Re: Tooltip Connector Placement - dijit.tooltipDialog

bobcarr — Wed, 10 Apr 2013 09:15:19 GMT

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.

Re: Tooltip Connector Placement - dijit.tooltipDialog

AaronCurtiss — Mon, 13 May 2013 21:35:31 GMT

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

Re: Tooltip Connector Placement - dijit.tooltipDialog

bobcarr — Tue, 14 May 2013 17:08:39 GMT

No solution yet. I will revisit this today, possibly replacing the tooltipDialog with another widget.