nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

&amp;quot;Tooltip&amp;quot; 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.

Finde mehr Beiträge mit dem Tag

Accepted answers

BenFousek

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

All comments

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

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

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.