Taking Tooltips Off The Map

At my workplace there is a regular show-and-tell session where users of various BI tools come together to share what they’ve been working on. This cultivates inspiration, solves problems and cross-pollinates the best ideas between platforms.

In a recent gathering a colleague demonstrated a map of the UK containing population data by region, which he had constructed in HTML5. It was extremely clean and the interaction was instantaneous – hovering over an area revealed details about that area instantly. However, what struck me the most was that rather than showing a tooltip at the point where the mouse pointer hovered, it was tucked away in the top right corner, away from the landmass or point of focus.

This solved a great problem when mapping the UK in a landscape display, as most monitors are. Landscape works extremely well for many regions that have greater longitude than latitude (they are ‘wider’ than they are ‘high’), such as the contiguous USA, Canada, China, Russia or Australia. But you can easily fit the UK in twice, side-by-side in a landscape view – a useful situation if you want to provide a before/after comparison, but if you only want to show one map then it presents a lot of dead space. Moving the details from a tooltip into the North Sea used that space well.

And there is a second great benefit to this arrangement – when we are viewing maps, the regional context is often very important. If I want to see the tooltip for a region on the west coast of The Netherlands, for instance, quite often this will obscure those in the south east, and prevent me from making a useful comparison between the two whilst also displaying the tooltip.

In the appropriate scenario, removing the standard tooltip but adding this information elsewhere can help solve both of these issues. Here’s a deliberately simple example I’ve mocked up, showing a fictitious territory in central Europe. Since the area in the top right corner (north east) is not relevant for comparison, I can utilise it for the ‘tooltip’, as per this example:

This is a very simplistic example, but I just wanted to demonstrate the basic concept for now. Every real application will be different, but the benefits are quite real without taking anything away.

And how was it achieved? With a very simple secondary worksheet containing all the key value, which was just floated over the area not contained by my region. Download it and see for yourself!