dojo toolbar button user info tips

[JMcNeil]

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

[derekswingley1]

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>

[JMcNeil]

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.

[derekswingley1]

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

[JMcNeil]

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

Thanks