Tooltip while using draw widget

[ADITYAKUMAR1]

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 

[UndralBatsukh · Accepted solution]

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

[ADITYAKUMAR1]

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';


});

[ADITYAKUMAR1]

@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";
});