This package is meant to provide a standard way to handle informational tooltips when users hover over (on desktop devices) or touch (on mobile devices) a state or county in the Map Center.

When a user performs either of those actions, the following things occur:

  • The tooltip element #tooltip is rendered and added to the page by nhmc.tooltips.render.
  • The tooltip element is positioned by nhmc.tooltips.position–normally to an area close to where the user touched or hovered over the state or county, but this can be overridden if desired.
  • If the user is on a mobile device, the rest of the map no longer responds to tooltip-related events and waits for the user to manually close the tooltip. (The module developer’s implementation of nhmc.tooltips.render should call nhmc.tooltips.addClose when rendering the tooltip element in order to provide the user with this opportunity.) Once the tooltip is closed, the aforementioned flow is able to start again.

If the user is on a desktop device, the tooltip position will update continously as the cursor moves within the same state or county, and the tooltip element will be removed when the cursor is no longer over that area.





This function performs any initialization steps required by the tooltip system. This currently includes only calling nhmc.tooltips.bindHover.

Event handling



This is a standard JavaScript array that contains zero or more handles returned by dojo.connect. Dojo’s event handling for graphics objects (and other items in general, but we only use it for graphics objects) is powerful in that it doesn’t require DOM elements to exist as in jQuery–but it introduces a bit more complexity in that binding an event handler returns a handle that must be passed later to dojo.disconnect in order to unbind that handler.

The handles stored in this array correspond only to the event handlers required by the tooltip system. This array should be treated as an implementation detail of nhmc.tooltips.bindHover and nhmc.tooltips.unbindHover and probably should not be accessed by any other parts of the Map Center.




This function binds all event handlers needed for the interactions listed above to occur. This includes all checking for mobile devices in order to bind these event handlers correctly; of course, any module-specific handling of such devices (such as different positioning, different content or providing a close button) will have to perform those checks elsewhere as well.




This function shuts down the tooltip system by unbinding all event handlers bound by nhmc.tooltips.bindHover.





This function is an event handler that sets the position of the tooltip element. By default, this function places the tooltip close to the user’s mouse cursor (or touch location), but offset in the y-direction by nhmc.tooltips.xOffset and in the x-direction by nhmc.tooltips.yOffset. (Yes, this makes no sense. It’s the same convention used by CSS Globe‘s tutorial, and it doesn’t make sense there either.) If the tooltip would extend below the bottom of the document or to the right of the document’s right edge, it is moved to the opposite side of the user’s cursor (or touch location) in order to prevent this.

In certain cases, a module developer might want to override this position; for example, we do this for broadcast versions of just about all of our maps so the tooltip is always on the left side of the document. To do this, simply assign a new function to nhmc.tooltips.position. For example, since we set the position of #tooltip in this case using broadcast-specific stylesheets, we simply assign a function with an empty body:

nhmc.tooltips.position = function(e) {};



This property determines how many pixels away from the mouse cursor (or touch location) the tooltip should be positioned in the y-direction.



This property determines how many pixels away from the mouse cursor (or touch location) the tooltip should be positioned in the x-direction.





This function creates the tooltip element #tooltip, appends it to the <body> and renders its content.


This function is meant to be overridden by module developers. The value of this is the Dojo path object being hovered over (or touched). If you need to access information about that area, access the name or FIPS code with this.nhmcData; more information about the properties of that object are available in the nhmc.geo documentation.





This function is meant to be called from within nhmc.tooltips.render for touch devices as determined by Modernizr.touch. It provides a close button for users to remove the currently showing tooltip and rebind the tooltip system’s event handlers.




This function removes the tooltip element.