ESRI Sample for maptips?

2790
6
12-14-2012 09:55 AM
SteveCole
Frequent Contributor
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
0 Kudos
6 Replies
SteveCole
Frequent Contributor
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);
0 Kudos
JohnGravois
Frequent Contributor
this one is in the southeast, but it definitely uses onMoveOver and onMouseOut with polygon features...
0 Kudos
SteveCole
Frequent Contributor
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.
0 Kudos
ChristopherPollard
Occasional Contributor
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]
0 Kudos
SteveCole
Frequent Contributor
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?...
0 Kudos
ChristopherPollard
Occasional Contributor
[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
0 Kudos