topic Re: Tooltip while using draw widget in ArcGIS JavaScript Maps SDK Questions

Tooltip while using draw widget

ADITYAKUMAR1 — Fri, 03 Mar 2023 16:54:20 GMT

HI ,

I am working with ArcGIS JavaScript 4 and using Draw widget to draw line/polygon and rectangle. As compared to ArcGIS 3, the tooltip option is not available in the current version. Any idea how to achieve that?

I was able to get the x,y of the cursor using point-move. But not sure how to bring a div on the evt.x,evt.y

View.on('pointer-move', (evt) => {
console.log(evt.x, evt.y);

Thanks

Aditya

Re: Tooltip while using draw widget

UndralBatsukh — Fri, 03 Mar 2023 20:26:10 GMT

Hey there,

You create a create a div with absolute position and set the top and left corners to the event's x and y. Something like this: https://codepen.io/U_B_U/pen/yLxbZjz?editors=1000

Re: Tooltip while using draw widget

ADITYAKUMAR1 — Sat, 04 Mar 2023 01:50:05 GMT

Thanks for the response.

I did something like this which is throwing my div outside map.

mapView.on('pointer-move', (evt) => {
//console.log(evt.x, evt.y);
var element = document.createElement("div");
element.appendChild(document.createTextNode('hi'));
document.getElementById('map').appendChild(element);
document.getElementById("element").style.opacity= 0;
document.getElementById("element").style.position="absolute";
document.getElementById("element").style.color="white";
document.getElementById("element").style.left = evt.x + 'px';
document.getElementById("element").style.top =evt.y + 'px';

});

Re: Tooltip while using draw widget

ADITYAKUMAR1 — Sat, 04 Mar 2023 14:35:40 GMT

@UndralBatsukh Resolved at my end. Below are the code. Appreciate your help.

const toolTipSpan = document.createElement("toolTipSpan");
toolTipSpan.appendChild(document.createTextNode('hi'));

document.getElementById("viewDiv").appendChild(toolTipSpan);
view.on("pointer-move", (event) => {

toolTipSpan.style.position="absolute";
toolTipSpan.style.backgroundColor = "white";
toolTipSpan.style.borderRadius = "25px";
toolTipSpan.style.padding = "10px";
toolTipSpan.style.left = event.x + "px";
toolTipSpan.style.top = event.y + "px";
});