topic Re: "Tooltip" when mousing over a point in ArcGIS JavaScript Maps SDK Questions

&quot;Tooltip&quot; when mousing over a point

RayJulich — Fri, 19 Jul 2013 14:45:01 GMT

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.

Re: "Tooltip" when mousing over a point

BenFousek — Fri, 19 Jul 2013 16:04:34 GMT

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.

Re: "Tooltip" when mousing over a point

JonathanUihlein — Fri, 19 Jul 2013 16:48:29 GMT

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

Re: "Tooltip" when mousing over a point

BenFousek — Sun, 12 Dec 2021 00:07:59 GMT

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.

Re: "Tooltip" when mousing over a point

JonathanUihlein — Fri, 19 Jul 2013 19:48:46 GMT

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.

Re: "Tooltip" when mousing over a point

BenFousek — Fri, 19 Jul 2013 20:15:38 GMT

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.

Re: "Tooltip" when mousing over a point

RayJulich — Sun, 12 Dec 2021 00:08:01 GMT

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.

Re: "Tooltip" when mousing over a point

BenFousek — Thu, 25 Jul 2013 16:15:53 GMT

//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);

Re: "Tooltip" when mousing over a point

RayJulich — Thu, 25 Jul 2013 18:18:07 GMT

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

topic Re: "Tooltip" when mousing over a point in ArcGIS JavaScript Maps SDK Questions

&amp;quot;Tooltip&amp;quot; when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

Re: "Tooltip" when mousing over a point

"Tooltip" when mousing over a point