Javascript API - applying tooltips

OliviaGill · ‎11-10-2014

At the moment I have 3 menu items that draw a line, point or area on a map. I'm using

esri.bundle.toolbars.draw.addPoint = "Click the map at the location you want to search";

as a tooltip for drawing the point.

However for the draw area and line I want a different tooltip for each so that it reads:

"Click to start drawing a search line" for a line and "Click to start drawing a search area"; for an area.

At the moment this is the code that's used so that the line tool tip reads as area. Is there a way to distinguish between the two?

esri.bundle.toolbars.draw.addPoint = "Click the map at the location you want to search";

esri.bundle.toolbars.draw.start = "Click to start drawing a search area";

esri.bundle.toolbars.draw.resume = "Click to continue drawing your search area";

esri.bundle.toolbars.draw.finish = "Click to continue drawing or Double-click to finish";

esri.bundle.toolbars.draw.complete = "Click to continue drawing or Double-click to finish";

esri.bundle.widgets.legend.NLS_noLegend = "Legend will appear here when search results are displayed on the map.";

map = new esri.Map("map", {

logo : false

});

Any help appreciated!

TimWitt2 · ‎11-10-2014

Olivia,

Maybe you could create a custom window, if there is no way to do it with the native ESRI tooltips?

I have an example here:

http://jsfiddle.net/timw1984/5398h/

I know this is not an answer to your question but I hope it helps

Tim

TimWitt2 · ‎11-10-2014

I just thought of another way that might work.

You could change the tooltip depending on which button you press?

For example:

on(registry.byId("AreaButton"), "click", function () {

esri.bundle.toolbars.draw.start = "Click to start drawing a search area";

});

on(registry.byId("LineButton"), "click", function () {

esri.bundle.toolbars.draw.start = "Click to start drawing a search line";

});

AkshayHarshe · ‎11-11-2014

Hi Olivia,

I was just trying to research this looks like you have following options:

To view all the customizable widget strings view any of the samples in a browser with debugging tools open and type console.dir(esri.bundle) in the console.

Tim Witt‌ is partly correct you can access the element and apply the tool tip.

Here is a hack that I did in the code it uses

on(document.getElementById("dijit_form_Button_2_label"), "click", function(){

esri.bundle.toolbars.draw.freehand = "Click to start drawing a search line"

});

FOR THE FULL CODE USE FOLLOWING as SAMPLE:

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Maps Toolbar</title>

<style>

html, body, #mainWindow {

font-family: sans-serif;

height: 100%;

width: 100%;

}

html, body {

margin: 0;

padding: 0;

}

#header {

height: 80px;

overflow: auto;

padding: 0.5em;

}

</style>

var map, toolbar, symbol, geomTask;

require([

"esri/map",

"esri/toolbars/draw",

"esri/graphic",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"dojo/parser", "dijit/registry", "dojo/on",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"

], function(

Map, Draw, Graphic,

SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,

parser, registry, on

) {

parser.parse();

map = new Map("map", {

basemap: "streets",

center: [-15.469, 36.428],

zoom: 3

});

map.on("load", createToolbar);

// loop through all dijits, connect onClick event

// listeners for buttons to activate drawing tools

registry.forEach(function(d) {

// d is a reference to a dijit

// could be a layout container or a button

if ( d.declaredClass === "dijit.form.Button" ) {

d.on("click", activateTool);

}

});

on(document.getElementById("dijit_form_Button_2_label"), "click", function(){

esri.bundle.toolbars.draw.freehand = "Click to start drawing a search line"

});

function activateTool() {

var tool = this.label.toUpperCase().replace(/ /g, "_");

toolbar.activate(Draw[tool]);

map.hideZoomSlider();

}

function createToolbar(themap) {

toolbar = new Draw(map);

toolbar.on("draw-end", addToMap);

}

function addToMap(evt) {

var symbol;

toolbar.deactivate();

map.showZoomSlider();

switch (evt.geometry.type) {

case "point":

case "multipoint":

symbol = new SimpleMarkerSymbol();

break;

case "polyline":

symbol = new SimpleLineSymbol();

break;

default:

symbol = new SimpleFillSymbol();

break;

}

var graphic = new Graphic(evt.geometry, symbol);

map.graphics.add(graphic);

}

});

</script>

</head>

<button data-dojo-type="dijit/form/Button">Point</button>

<button data-dojo-type="dijit/form/Button">Multi Point</button>

<button data-dojo-type="dijit/form/Button">Polyline</button>

<button data-dojo-type="dijit/form/Button">Polygon</button>

<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>

<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>

<button data-dojo-type="dijit/form/Button">Arrow</button>

<button data-dojo-type="dijit/form/Button">Triangle</button>

<button data-dojo-type="dijit/form/Button">Circle</button>

<button data-dojo-type="dijit/form/Button">Ellipse</button>

</div>

</div>

</body>

</html>

Hope that helps

Akshay Harshe

Esri Technical Support

Thanks,
Akshay Harshe