topic Re: Customise cursor tooltip in ArcGIS JavaScript Maps SDK Questions

Customise cursor tooltip

EdSaunders — Tue, 21 Feb 2012 07:12:40 GMT

Hi all,

The Esri draw toolbar has a neat cursor tooltip that follows the cursor about (telling the user what to do). I'd like to implement this for an add text tool. Is this something we can access in the API? Or Dojo? I couldn't find it in either.

Thanks for any suggestions.

Ed

Re: Customise cursor tooltip

EdSaunders — Thu, 23 Feb 2012 07:24:13 GMT

No-one? Not possible?

Re: Customise cursor tooltip

derekswingley1 — Thu, 23 Feb 2012 18:57:43 GMT

The tooltip you see when using a drawing toolbar is a div that's repositioned as the cursor moves around when a tool is active. It is not a dijit from dojo and it's nothing too special.

Here's a JS fiddle showing how to do something similar: http://jsfiddle.net/FXZwc/

Re: Customise cursor tooltip

EdSaunders — Sun, 26 Feb 2012 06:20:48 GMT

Derek, thanks for the info and the sample, much appreciated.

Ed

Re: Customise cursor tooltip

ShaunWeston — Thu, 25 Jul 2013 08:41:36 GMT

Is it possible to overwrite the style with your own style e.g. I use jQuery tooltips in an application, can I change the drawing toolbar to use those?

Re: Customise cursor tooltip

CoreyAlix — Tue, 11 Nov 2014 18:03:37 GMT

How about an enhancement? toolbar.activate(esri.toolbars.Draw.POINT, {tooltip: "my-custom-tool"});

Re: Customise cursor tooltip

CoreyAlix — Tue, 11 Nov 2014 18:33:55 GMT

This should be an enhancement but if you want to avoid all that code you could replace the _setTooltipMessage method. Do the default action unless this._options.tooltip exists. Initialize the Draw tool with

drawTool = new Draw(map, {tooltip: "place text"})

Alternatively you could set

drawTool._tooltip.innerHTML = "place text"

when you activate() it.

Re: Customise cursor tooltip

StanMcShinsky — Sun, 12 Dec 2021 05:34:47 GMT

Shaun,

It looks like from that sample you can change the style to match what you want. Just use the css

  .map .tooltip {
        background-color: red;
        border: 1px solid #7EABCD;
        border-radius: 4px 4px 4px 4px;
        font-size: 9pt;
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 9999;
      }

and add it to a map that has tool tips like the draw toolbar and you should get the desired effect.

-Stan

Re: Customise cursor tooltip

MarkLache1 — Tue, 28 Aug 2018 16:47:51 GMT

I have the css and JS working for the text tooltip. Is there a way to have a symbol (i.e a "x") follow my mouse around as well?

Re: Customise cursor tooltip

Anonymous User — Mon, 24 Sep 2018 18:22:45 GMT

Mark,

I came across this thread. I want to add a custom cursor to Robert's famed eSearch. Like my site MapViewer - Savannah Area GIS has.

So what you'd do basically is set the cursor to a custom image ....

this.map.setMapCursor("url(images/cursor_parcel1.cur),auto"); // (the cursor image on my site above)

And when draw is deactivated...

this.map.setMapCursor("default");

I just need to make the tooltip move out of the way to the right but am still trying to figure out where they nestled that div away.

Today I am trying to understand how eSearch works for this. I see various things where Draw is active. I leave it active after clicking for my test site. And it's basically good, except that hitting Clear in the Graphic search tab deactivates draw but leaves the cursor image on. I am trying to figure that out. And I haven't really gotten to Identify yet either.

It's half-working, here... I still need to get it on better click handlers especially identify.

ArcGIS Web Application

Also you need to make a .cur image file. It has to be a .cur file. I used this site: Cursor Editor because you need to choose the hot spot of the cursor, i.e. where it will be "active" and click on the screen.

So, a work in progress... I'll post back when complete!

Re: Customise cursor tooltip

MarkLache1 — Tue, 25 Sep 2018 19:22:16 GMT

Thanks for the info Kevin.

Wow your map at MapViewer - Savannah Area GIS works very well. How do you get it to load/refresh so quickly on panning?

Re: Customise cursor tooltip

Anonymous User — Wed, 26 Sep 2018 20:43:01 GMT

I host API locally. And.. it's not Web App Builder. In fact, today I am working on using 'build' with to get my new version of it faster -- ArcGIS Web Application and also trying to figure out optimal SOC pooling etc on my limited instance (this little AWS server only has 8gb / 2 core)

Re: Customise cursor tooltip

MarkLache1 — Thu, 27 Sep 2018 14:46:40 GMT

Right now I'm running WAB and its hosted in AGOL. Any suggestions to speed things up a bit. Maybe we can continue this conversation over email?

Re: Customise cursor tooltip

Anonymous User — Thu, 27 Sep 2018 16:01:40 GMT

Sure, my email should be on my profile. I wonder if Esri runs a Build on stuff hosted on the AGOL cloud? But yes, especially since early WAB 2.x versions last year it has begun to slow down, especially on older computers.

Re: Customise cursor tooltip

MarkLache1 — Thu, 27 Sep 2018 18:16:31 GMT

Cant find it. I followed you but still cant send a PM to you. I think you have to follow me back?

Re: Customise cursor tooltip

Anonymous User — Thu, 27 Sep 2018 19:21:41 GMT

Oh yea. They still have that thing with Geonet. No simple PM. Yup I will follow you, stand by to stand by...