Draw toolbar tooltips

2665
6
09-22-2014 08:12 AM
TimWitt2
MVP Alum

Hey everybody,

I am trying to dynamically change the draw tooltips. I know if I just want to change the text one time I can access it by using

i.e.

esri.bundle.toolbars.draw.resume = "New text here";

But what If I want to change the innerHTML constantly during a mouse-move event?

Would I have to access it like this?

dojo.byId ("whatever the id of the draw tool tooltip is for resume").innerHTML = evt.x;

I am having a hard time finding the Id. Or is there a different way to do this?

Thanks!

Tim

0 Kudos
6 Replies
KellyHutchins
Esri Frequent Contributor

One option would be to modify the text when the mouse moves:

on(map.graphics, "mouse-move",function(){

            esri.bundle.toolbars.draw.resume = "mouse moving";

});

0 Kudos
TimWitt2
MVP Alum

Thanks for the reply Kelly,

when I try that it doesn't work. However it works when I update the innerHTML in a div that I placed into a pane.

linelenMouseEvt = map.on("mouse-move", function (evt) { 

  if (clickedPointsArr.length > 0) { 

  distParams = new DistanceParameters(); 

  var mp = evt.mapPoint;

  distParams.distanceUnit = geometryService.UNIT_FOOT;

  distParams.geometry1 = clickedPointsArr[clickedPointsArr.length - 1]; 

  distParams.geometry2 = mp; 

  distParams.geodesic = true; 

  geometryService.distance(distParams, function (distance) { 

  lastdrawnsegmentlength = distance; 

  totalsegmentlength1 = previousSegmentLength; 

  totalsegmentlength = totalsegmentlength1 + lastdrawnsegmentlength; 

  totalLength = parseFloat(totalsegmentlength).toFixed(2);

  console.log(totalLength);

  dojo.byId("current").innerHTML = totalLength; // works here

  esri.bundle.toolbars.draw.resume = totalLength; // doesn't work here

  });

  }

  });

Once I finish my first drawing, the last number shows up in the esri.bundle.toolbars.draw.resume tooltip box, once I start drawing the second line.

Tim

0 Kudos
TimWitt2
MVP Alum

Kelly Hutchins I assume this doesn't work because the tooltip is not created in the "mouse-move" function?

0 Kudos
BenFousek
Occasional Contributor III

Tim,

Check this out hardcider/Measure.js at master · btfou/hardcider · GitHub . It's a tooltip updater method in my measure widget. Look at line 218. You need to call the toolbar's _setTooltipMessage() method every time you want the tooltip to update.

This widget relies on helper methods extending esri/map. this.map.setDrawTooltips({}) calls this method:

//set/reset draw tooltips

setDrawTooltips: function(draw) {

    draw = draw || {};

    var defaults = {

        addMultipoint: 'Click to start adding points',

        addPoint: 'Click to add a point',

        addShape: 'Click to add a shape, or press down to start and let go to finish',

        complete: 'Double-click to finish',

        finish: 'Double-click to finish',

        freehand: 'Press down to start and let go to finish',

        resume: 'Click to continue drawing',

        start: 'Click to start drawing'

    };

    lang.mixin(esriBundle.toolbars.draw, defaults, draw);

}

TimWitt2
MVP Alum

Thanks Ben, I'll check it out!

0 Kudos
BenFousek
Occasional Contributor III

Hey Tim Witt‌. Somebody pointed out your Advanced Draw fiddle to me the other day. Nice work. Just realized it was yours. I'm updating/reworking my draw module for another project. You have a quite a bit of the same features but here's my old one hardcider/viewer/js/hardcider/draw at master · btfou/hardcider · GitHub. It just provides methods (dev must provide buttons, etc in app) but the new one will be an all encompassing templated widget.

0 Kudos