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!
Great post as always Mark but I would go the extra mile if possible and make the box appear only when you hover over the map. It’ll be great if the rest of the time, it is hidden or not visible, don’t you think?
Hey Pablo, you can do that by removing the border from the floating worksheet and this way it won’t seem visible unless you hover on the map. I just tried it.
Thanks for the idea & again thanks to Mark for the nice tip.
Very neat Mark, thank you for sharing. Pablo’s idea is great as well, let’s see if there’s a solution to that :).