External tooltips can be used to display the tooltips outside of the iframe. When displayed outside iframe, tooltips can be positioned to the bottom of the viewport, so they are visible regardless of the position of the map. This is especially useful on mobile devices.
This page shows an example of how this can be done. Feel free to inspect the source code of the page, or scroll down to see a code example.
But first, let's embed a map in between this paragraph and the following paragraph
Now, if you mouse-hover or tap on the map above, you will notice that the tooltips are not shown inside the iframe (which we hightlighted using a green stroke on this page).
To achieve this effect, the embedding website need to communicate with the visualization code inside the iframe. This is made possible by the window.postMessage() API. But don't worry, you don't have to use this raw browser API yourself. To make this a little easier we wrote a little script that helps getting you started. You can read about it in our developer documentation or by keeping on reading this page :)
First, you need to embed our events.js script. Then you can use datawrapper.on() to listen to visualization events. To show tooltips we need to listen to the region.mouseenter event, to hide tooltips we need the region.mouseleave event.
<script src="//static.dwcdn.net/js/events.js"></script> <script> datawrapper.on('region.mouseenter', function(event) { // code to show tooltip goes here console.log('show tooltip', event.chartId, event.data); }); datawrapper.on('region.mouseleave', (event) => { // code to hide tooltip goes here }); </script>
The events.data object will contain the uploaded data row corresponding to the highlighted region. To render the tooltips, you are free to use whatever templating language you want (maybe there is already one used on your website?), or just use custom JavaScript. For an example, you can inspect the source code of this page.
If you have further questions, feel free to send us an email at support@datawrapper.de 👋.