"Tooltip" when mousing over a point

[RayJulich]

I am converting a bunch of Google Maps web pages to ESRI Maps. In Google Maps, I was able to have a "tooltip" that would appear when a user moused over a point on the map (Example: http://wa.water.usgs.gov/projects/skagit/hydrographs.htm). Can I do this on my ESRI map? (Example: http://wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm) I've tried a few things, but haven't been successful.

[BenFousek]

Here's sample https://developers.arcgis.com/en/javascript/jssamples/fl_hover.html that is a good starting point for showing a tooltip for graphics.

[JonathanUihlein]

The sample that btfou posted uses an InfoWindow.

Try starting with the infoWindow documentation & samples.

Doc:
https://developers.arcgis.com/en/javascript/jsapi/infowindow-amd.html
Sample:
https://developers.arcgis.com/en/javascript/jshelp/intro_infowindow.html

[BenFousek]

The sample that btfou posted uses an InfoWindow.]

Incorrect. This sample uses a dijit/TooltipDialog with mouse-over and mouse-out events. Nothing to do with infoWindow.

Based on the links in the original post this is the functionality needed.

Ray - ran this in the console of your map:

var dialog = new dijit.TooltipDialog({
  style: 'position:absolute; width:100px;'
});
dojo.style(dialog.connectorNode, 'display', 'none');
dialog.startup();
map.getLayer('points_glayer').enableMouseEvents();

map.getLayer('points_glayer').on('mouse-over', function (evt) {
  //set the content to your local well no field
  //dialog.setContent(evt.graphic.attributes.WELL_NO);
  dialog.setContent('Hi! I'm a tooltip');
  dijit.popup.open({
    popup: dialog,
    x: evt.pageX,
    y: evt.pageY
  });
});
map.getLayer('points_glayer').on('mouse-out', function (evt) {
  dijit.popup.close(dialog);
});

I noticed your points_glayer doesn't have attributes. When you create the graphics form your data source take the well number and add it as an attribute of the graphic like this

graphic.setAttributes({ WELL_NO: the_well_no });

then you can use it to display as shown in commented part of the code above.

[JonathanUihlein]

Incorrect. This sample uses a dijit/TooltipDialog with mouse-over and mouse-out events. Nothing to do with infoWindow.

This code listens for onMouseOver to display an InfoWindow when the mouse hovers over a graphic.

Taken from the description on your sample page.

* * *

After inspecting rjulich's code, I see that they are already using an infoWindow.

[HTML]dojo.connect(glayer, "onClick", function (evt) {
    map.infoWindow.setContent(g.getContent());
    map.infoWindow.setTitle(g.getTitle());
    map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});[/HTML]

However, it seems that they want to be able to show a small infoWindow on hover, and a larger infoWindow on click.

I think it would be less work to continue using infoWindows rather than a TooltipDialog, which accomplishes the exact same thing in this specific circumstance.

rjulich can create a mouse hover event for showing and hiding the infoWindow, just like Ben did with the TooltipDialog.

I would also suggest trying the AMD style of Dojo, if you are feeling adventurous.

[BenFousek]

The description does say "infoWindow", but it's in the generic sense and not an esri infoWindow.

The esri InfoWindow is ineffective as a tooltip. There is already a infoTemplate for the graphics. If the user clicks on a graphic to open infoWindow with the infoTemplate, then moves the mouse over another graphic the infoWindow is going to close and reopen as the tooltip. Doesn't seem very user friendly to me.

Also I doubt that a tooltip is more coding that dealing with the infoWindow.

[RayJulich]

Yes. This is what I'm looking for.

I noticed your points_glayer doesn't have attributes. When you create the graphics form your data source take the well number and add it as an attribute of the graphic like this

graphic.setAttributes({ WELL_NO: the_well_no });

then you can use it to display as shown in commented part of the code above.

I can't figure out where in my code to insert the graphic.setAttributes({ WELL_NO: siteid }); code. I create the layer toward the top of the page:

defineGraphicLayer("points_glayer", 1);
var glayer = map.getLayer("points_glayer"); 
glayer.clear();

I have a loop farther down in the code that reads data from a file where I actually read in the siteid variable for each point.

[BenFousek · Accepted solution]

//Add the marker to the map siteTemplate = new esri.InfoTemplate(title, info); /* //set attributes here */ attr = { SITE_NAME: site_name }; graphic = new esri.Graphic(point, icon, attr, siteTemplate); map.infoWindow.resize(500, 400); glayer.add(graphic);

[RayJulich]

Thank you. That worked for me.  That's what I was looking for:
http://wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm