topic Re: dojo toolbar button user info tips in ArcGIS JavaScript Maps SDK Questions

dojo toolbar button user info tips

JMcNeil — Tue, 08 Jun 2010 21:55:42 GMT

I have created a toolbar with several buttons, everything fires fine but I want to add some tool tip information for each tool. So when a user does a mouse over/hoover a message tip tells the user that this button zoom in or this button hides the TOC.
I know how to do this in html but this dojo stuff is new to me and I can't find it anywhere. Can some one tell me how to do this.

<div id="navToolbar" dojoType="dijit.Toolbar">

      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="javascript:navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>

      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>

<div dojoType="dijit.form.Button" id="hidetoc" onclick="showHideDiv('control_panel');">Show/Hide TOC</div>

</div>

Thanks
J

Re: dojo toolbar button user info tips

derekswingley1 — Sun, 12 Dec 2021 16:21:40 GMT

In your JavaScript:

dojo.require("dijit.Tooltip");

In your mark up:

      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <span id="zoomprev_tt" dojoType="dijit.Tooltip" connectId="zoomprev">I show up on hover!</span>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <span id="zoomnext_tt" dojoType="dijit.Tooltip" connectId="zoomnext">Me too!</span>

Re: dojo toolbar button user info tips

JMcNeil — Sat, 11 Dec 2021 16:08:18 GMT

Thanks swingley,

I was trying the <span> tag and dojoType="dijit.Tooltip" before but it all showing up as text and breaking my flow. It still is giving me problems

Here's my code


 <div id="toolbarmenu" >
         <div id="navToolbar" dojoType="dijit.Toolbar"> 
     
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="javascript:navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>
      <div dojoType="dijit.form.Button" id="select" iconClass="selectIcon" onClick="globals.toolBar.activate(esri.toolbars.Draw.EXTENT);">Select</div>
      <div dojoType="dijit.form.Button" id="clear" iconClass="clearIcon"onClick="globals.toolBar.deactivate();earthquake.clearSelection();">Clear</div>
   <div dojoType="dijit.form.Button" id="hidetoc" onclick="showHideDiv('control_panel');">Show/Hide TOC</div>
  
     

 </div>

This is what I added and it is still not working, it is just adding "I show up on hover!" as text and after that all my other buttons don't look right and don't function and they are on separate lines.


    
   <div id="toolbarmenu" >
         <div id="navToolbar" dojoType="dijit.Toolbar"> 
     
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="javascript:navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div><span id="zoomprev_tt" dojoType="dijit.Tooltip" connectId="zoomprev">I show up on hover!</span>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>
      <div dojoType="dijit.form.Button" id="select" iconClass="selectIcon" onClick="globals.toolBar.activate(esri.toolbars.Draw.EXTENT);">Select</div>
      <div dojoType="dijit.form.Button" id="clear" iconClass="clearIcon"onClick="globals.toolBar.deactivate();earthquake.clearSelection();">Clear</div>
   <div dojoType="dijit.form.Button" id="hidetoc" onclick="showHideDiv('control_panel');">Show/Hide TOC</div>
  
      
       

 </div>

Any suggestions, I'm sure I"m just missing something.

Re: dojo toolbar button user info tips

derekswingley1 — Wed, 09 Jun 2010 15:02:02 GMT

Hmm...do you have dojo.require("dijit.Tooltip"); in your JavaScript?

Re: dojo toolbar button user info tips

JMcNeil — Thu, 10 Jun 2010 16:26:35 GMT

That was it I wasn't declaring dijit.Tooltip in my JavaScript. Now how do I give you credit and mark the answer?

Thanks