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

Customise cursor tooltip

EdSaunders

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

Finde mehr Beiträge mit dem Tag

Accepted answers

derekswingley1

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/

All comments

MarkLache1

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?

Anonymous User

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)

MarkLache1

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?

Anonymous User

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!

MarkLache1

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?

StanMcShinsky

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

CoreyAlix

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.

CoreyAlix

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

ShaunWeston

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?

EdSaunders

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

Ed

derekswingley1

EdSaunders

No-one? Not possible?

Nimm an der Unterhaltung 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.