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

[EdSaunders]

No-one? Not possible?

[derekswingley1 · Accepted solution]

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/

[CoreyAlix]

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

[EdSaunders]

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

Ed

[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?

[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.

[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?

[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!