topic Re: ESRI Sample for maptips? in ArcGIS JavaScript Maps SDK Questions

ESRI Sample for maptips?

SteveCole — Fri, 14 Dec 2012 17:55:08 GMT

I could swear that about a month or two ago, I was looking at an ESRI sample showing the use of maptips for polygon features. The sample data used was from someplace in New Mexico or someplace else in the desert southwest. I know it used onMouseOut and onMouseOver and would display a small div frame next to the mouse as long as it stayed within the feature's extent. For the life of me, I cannot find it again.

I tried implementing it into my project at the time but had difficulty since my data was continuous and the sample was showing data that was scattered across the map. I ended up removing that code from my project and now I can't find the sample. Argh!

Does this description ring any bells and can re-link me to that sample?

I just want to add a map tip to a point feature layer of mine. I already have an infoWindow set up for click events so I just want to add a simple map tip for the hover event. I tried implementing the code in this forum post but I guess I don't understand how to "define the required methods."

Thanks!
Steve

Re: ESRI Sample for maptips?

SteveCole — Sat, 11 Dec 2021 09:47:02 GMT

While I still haven't found the sample I was looking for, I did get the sample in the forum thread I linked to work. Here's the working code for anyone interested:

 //Attempt to add tooltips to the SnoCo Stream Gage layer
 var thisObject = this;

 //============================================================================= 
 // Functions to display and dismiss the tooltp on the SnoCo Stream Gage features
 //============================================================================= 
 this.showTooltip = function(evt) {
  var dialog = new dijit.TooltipDialog({
   id: "tooltipDialog",
   content: "Stage: " + evt.graphic.attributes.curHeight + " Ft<br/>" + dToday + "<br/>" + evt.graphic.attributes.NAME,
   style: "position: absolute; width: auto; font: normal normal bold 8pt Tahoma;z-index:100"
  });
  dialog.startup();

  dojo.style(dialog.domNode, "opacity", 0.85);
  dojo.style(dialog.domNode, "background", "#333");
  dojo.style(dialog.domNode, "color", "#EFEFEF");
  dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
 }

 this.closeDialog = function() {
  var widget = dijit.byId("tooltipDialog");
  if (widget) {
   widget.destroy();
  }
 }
 
 dojo.connect(theFeatureLayer, "onMouseOver", function(evt) {
  thisObject.closeDialog();
  thisObject.showTooltip(evt);
 });

        dojo.connect(theFeatureLayer, "onMouseOut", this.closeDialog);

Re: ESRI Sample for maptips?

JohnGravois — Tue, 18 Dec 2012 16:05:16 GMT

this one is in the southeast, but it definitely uses onMoveOver and onMouseOut with polygon features...

Re: ESRI Sample for maptips?

SteveCole — Fri, 21 Dec 2012 18:47:56 GMT

I missed your reply, John, but thanks for chiming in. I've seen the sample you linked but that was not the one. Instead of infowindows, the sample I recall has plain square boxes as the tooltip. I've attached a screen shot of my implementation of the code I posted earlier in this thread as an example of what I'm talking about.

Re: ESRI Sample for maptips?

ChristopherPollard — Sat, 11 Dec 2021 09:47:05 GMT

Steve,
thanks for posting your sample code.
I have since been able to get a similar sample working for myself but now I want to style the popup but I can't seem to get rid of the inner grey box with the light blue outline.
[ATTACH=CONFIG]20444[/ATTACH]
Here is my function:

 function showTooltip(evt){
        closeDialog();
        var tipContent = "<b>" + evt.graphic.attributes.Project+" </b>" ;
        var dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          content: tipContent 
        });
        dialog.startup();

       // dojo.style(dialog.domNode, "opacity", 0.85);
  dojo.style(dialog.domNode, "background", "#333");
  dojo.style(dialog.domNode, "color", "white");
  
        dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["BL"], {x: 8, y: 8});
      }

What I really want is a solid tooltipDialog like the ESRI San Diego shortlist example (see image 2).

Any suggestions would be great. Thanks, Chris

[ATTACH=CONFIG]20445[/ATTACH]

Re: ESRI Sample for maptips?

SteveCole — Fri, 04 Jan 2013 19:45:27 GMT

Hi Chris,

Glad the code helped you! I'm currently on vacation until next week so I can't try anything but I don't have quick answer for you right now. I remember wanting to change the background color of the tooltip as well without success. I'll try to look at it again next week but, for now, you might want to try an inspect the Dojo CSS. You might have to override the default CSS with "!important" in your own CSS file. Maybe that's why specifying via javascript object properties isn't working?...

Re: ESRI Sample for maptips?

ChristopherPollard — Sat, 11 Dec 2021 09:47:08 GMT

[ATTACH=CONFIG]20459[/ATTACH]
Steve,
that's exactly what I ended up doing.
It was the tooltip Container that was giving me that extra box with border.
The issue I was having was that using firebug I could never "INSPECT" the tooltip.
It would always close before I could figure out the proper dijit class.

.tundra .dijitTooltipContainer {
    background:  none repeat scroll 0 0 transparent;
    border: none;
}

thanks and enjoy your vacation