Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to modify one of the sample maps to add my own buttons, and I'm surprised at how complicated the HTML page is.

Here is the code for the simple "Details" button at the top left of the header:

<span class="dijit dijitReset dijitInline dijitToggleButton dijitToggleButtonChecked dijitChecked" widgetid="detailButton">
<span dojoattachevent="ondijitclick:_onButtonClick" class="dijitReset dijitInline dijitButtonNode">
    <span aria-labelledby="detailButton_label" role="button" dojoattachpoint="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" style="-moz-user-select: none;" id="detailButton" tabindex="0" title="Display Map Details" aria-pressed="true">
        <span dojoattachpoint="iconNode" class="dijitReset dijitInline dijitIcon esriDetailsIcon"></span>
        <span class="dijitReset dijitToggleButtonIconChar">?</span>
        <span dojoattachpoint="containerNode" id="detailButton_label" class="dijitReset dijitInline dijitButtonText">Details</span>
<input type="button" dojoattachpoint="valueNode" tabindex="-1" class="dijitOffScreen" value="">

The image itself is specified in the CSS.

Is all that code really necessary, and is there an easier way to add a button (with tooltip) to the interface of an ArcGIS Server JavaScript API map?

I noted that the Toolbar sample doesn't show tooltips, hence my investigation of the samples.

share|improve this question
Welcome to Dojo auto-generated madness – Ragi Yaser Burhum Feb 7 '12 at 10:02
new blog post from Esri explaining why dojo is used – Stephen Lead Feb 13 '12 at 22:12
up vote 4 down vote accepted

That's the markup generated by dojo for a specific kind of widget (dijit). You wouldn't actually build that yourself– it's the result of creating a dijit (either declaratively or programmatically).

There are a number of button-style dijits available:

share|improve this answer
ah - so I shouldn't be looking at the HTML page, but instead at the JS code which creates those buttons. That makes sense - thanks – Stephen Lead Feb 7 '12 at 6:03
@StephenLead yep, exactly – Derek Swingley Feb 7 '12 at 6:55
...and thats why ESRI needs to stop using Dojo. – Donny V. Feb 7 '12 at 14:38
@DonnyV. The markup generated by dojo is optional when using Esri's API. It's up to you whether you use a native html <button>, <input type="button"> or a dijit. The advantage of using dijits is you get buttons that look the same cross-browser. To get a consistent look cross-browser requires additional markup, and that's what dojo generates. You rarely have to worry about working with that markup directly (there are some cases where you might want to tweak some CSS). This is helpful for some background: Full-disclosure: I work for Esri on the JS API team. – Derek Swingley Feb 7 '12 at 16:11
@DonnyV.very constructive comment. Really added no value. Dojo adds the extra markup to 1 add aria support, which iirc no other js ui language does, and 2 to style the buttons to look the same across browsers like derek said. These extra dom elements are no reason why esri should stop using dojo. – Steve Feb 7 '12 at 17:57

<button onClick=_onButtonClick>?</button>

Most of that code is to make the button 'pretty'. You'll need to use the Dojo dijits stuff to put the map on the page, but you could fall back to plain old HTML a lot of the time.

share|improve this answer
Thanks - and any best-practices for the tooltips? dijit.tooltip? – Stephen Lead Feb 7 '12 at 5:06

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.