Javascript API - applying tooltips

4943
3
11-10-2014 06:27 AM
OliviaGill
New Contributor

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!

Tags (2)
0 Kudos
3 Replies
TimWitt2
MVP Regular Contributor

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

0 Kudos
TimWitt2
MVP Regular Contributor

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

});

0 Kudos
AkshayHarshe
Esri Contributor

Hi Olivia,

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

ToolbarOptions.jpg

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>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width,user-scalable=no">

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

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Maps Toolbar</title>

   

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

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

   

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      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>

  <body class="nihilo">

  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">

    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

      <span>Draw:<br /></span>

      <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">Line</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>

      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->

      <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 id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

  </div>

  </body>

</html>

Hope that helps

Akshay Harshe

Esri Technical Support

Thanks,
Akshay Harshe
Product Engineer at Esri
ArcGIS Insights