Fetch feature data on pointer-move event to label on hover?
Hey I'm struggling with fetching feature data from a feature layer on pointer-move event. I'd like to fetch the feature data over which the mouse pointer is currently hovering.
I have a country and a feature layer which represents its states. The goal is to give the state over which the mouse pointer is hovering a striking fill colour eg. red and display its name on some kind of label/tooltip.
I'm grateful for any suggestions and code snippets.
Thanks in advance 
Accepted Solutions
view
.when()
.then(function () {
return flStreckenausbau.when();
})
.then(function (layer) {
return view.whenLayerView(layer);
})
.then(function (layerView) {
view.on("pointer-move", handlerClick);
function handlerClick(event) {
view.popup
.fetchFeatures({ x: event.x, y: event.y })
.then(function (response) {
// Access the response from fetchFeatures
response.allGraphicsPromise.then(function (graphics) {
controlTooltip(graphics[0], event);
});
});
}
var currentName;
function controlTooltip(graphic, e) {
var tooltip = document.getElementById("nametooltip");
if (graphic !== undefined) {
var name = graphic.attributes.Namen;
//prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered
if (currentName !== name) {
tooltip.style.top = "" + e.y + "px";
tooltip.style.left = "" + e.x + "px";
}
tooltip.style.display = "inline-block";
tooltip.style.visibility = "visible";
tooltip.style.position = "absolute";
tooltip.style.backgroundColor = "#fff";
tooltip.style.padding = "10px";
tooltip.style.borderRadius = "5px";
tooltip.style.fontFamily = "sans-serif";
tooltip.style.fontWeight = "bold";
tooltip.style.boxShadow = "2px 2px 1px #88888888";
tooltip.innerHTML = name;
currentName = name;
} else if (graphic == undefined) {
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
}
}
}); <body>
<div id="viewDiv"></div>
<div id="statetooltip">
<div id="name"></div>
</div>
</body>This is what I came up with.
For some reason I had to use the view.popup.fetchFeatures method because the view.hitTest method didn't get me all the attributes (and I knew there had to be more than two). If anybody can tell me why this is/was happening or give a suggestion on how to improve my code feel free to contribute 
view
.when()
.then(function () {
return flStreckenausbau.when();
})
.then(function (layer) {
return view.whenLayerView(layer);
})
.then(function (layerView) {
view.on("pointer-move", handlerClick);
function handlerClick(event) {
view.popup
.fetchFeatures({ x: event.x, y: event.y })
.then(function (response) {
// Access the response from fetchFeatures
response.allGraphicsPromise.then(function (graphics) {
controlTooltip(graphics[0], event);
});
});
}
var currentName;
function controlTooltip(graphic, e) {
var tooltip = document.getElementById("nametooltip");
if (graphic !== undefined) {
var name = graphic.attributes.Namen;
//prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered
if (currentName !== name) {
tooltip.style.top = "" + e.y + "px";
tooltip.style.left = "" + e.x + "px";
}
tooltip.style.display = "inline-block";
tooltip.style.visibility = "visible";
tooltip.style.position = "absolute";
tooltip.style.backgroundColor = "#fff";
tooltip.style.padding = "10px";
tooltip.style.borderRadius = "5px";
tooltip.style.fontFamily = "sans-serif";
tooltip.style.fontWeight = "bold";
tooltip.style.boxShadow = "2px 2px 1px #88888888";
tooltip.innerHTML = name;
currentName = name;
} else if (graphic == undefined) {
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
}
}
}); <body>
<div id="viewDiv"></div>
<div id="statetooltip">
<div id="name"></div>
</div>
</body>This is what I came up with.
For some reason I had to use the view.popup.fetchFeatures method because the view.hitTest method didn't get me all the attributes (and I knew there had to be more than two). If anybody can tell me why this is/was happening or give a suggestion on how to improve my code feel free to contribute
