gka · September 28, 2020 19:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="https://static.dwcdn.net/css/roboto-bitter.css">
    <script type="text/javascript" src="https://static.dwcdn.net/js/events.js"></script>
    <style type="text/css">
    h1 { font-family: Bitter; font-size: 32px; margin: 3em 0 1em; }
    p { font-family: Roboto; line-height:1.35 }
    pre  { font-family: 'Roboto Mono'; }
    p,h1,pre {
      max-width: 480px;
      margin: 1em auto!important;
    }
    tt {
      background: #eee;
      padding: 1px 3px;
      color: #444;
    }
    a tt {
      color: inherit;
      background: transparent;
    }
    pre {
      max-width:600px;
      font-family: monospace;
      background: #f2f2f2;
      border: 1px solid #ddd;
      padding: 2ex;
      font-size: 14px;
    }
    
    .tooltip {
      position: fixed;
      left: 5px;
      right: 5px;
      bottom: 5px;
      background: #fffbc1;
      padding: 10px;
      border: 1px solid #f9c96d;
      display: none;
    }
    .tooltip h3 {
      margin: 0;
    }
    iframe {
      border: 1px solid #39f3bb;
    }
    </style>
    <script id="insert"></script>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <div class="block">
          <h1 class="title">External tooltips</h1>
          <p>External tooltips can be used to display the tooltips <strong>outside of the iframe</strong>. 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 <strong>especially useful on mobile devices</strong>.
          </p>
          <p>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.</p>
          <p>But first, let's embed a map in between this paragraph and the following paragraph</p>
          <div style="max-width:840px;margin: 1em auto">
            <iframe title="Map with tooltips activated, but empty templates" aria-label="Map" id="datawrapper-chart-3q6lR" src="https://local-dw-gka.s3.amazonaws.com/3q6lR/5/index.html" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important;" height="473"></iframe>
          </div>
          <p>
            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).
          </p>
          <p>
            To achieve this effect, the embedding website need to communicate with the visualization code inside the iframe. This is made possible by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><tt>window.postMessage()</tt></a> 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 <a href="https://developer.datawrapper.de/docs/listening-to-chart-interaction-events">in our developer documentation</a> or by keeping on reading this page :)
          </p>
          <p>
            First, you need to embed our <a href="//static.dwcdn.net/js/events.js"><tt>events.js</tt></a> script. Then you can use <tt>datawrapper.on()</tt> to listen to visualization events. To show tooltips we need to listen to the <tt>region.mouseenter</tt> event, to hide tooltips we need the <tt>region.mouseleave</tt> event.
          </p>
          <pre>&lt;script src="//static.dwcdn.net/js/events.js"&gt;&lt;/script&gt;
            &lt;script&gt;
  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
  });
 &lt;/script&gt;</pre>
          <p>
            The <tt>events.data</tt> 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 <a href="view-source:https://bl.ocks.org/gka/raw/af7c931cd5b579ebec03589cc34b6358/">source code of this page</a>.
          </p>
          <p>
            If you have further questions, feel free to send us an email at <a href="mailto:[email protected]?subject=External tooltips">[email protected]</a> 👋.
          </p>
        </div>
        <script type="text/javascript">
        !function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"])for(var e in a.data["datawrapper-height"]){var t=document.getElementById("datawrapper-chart-"+e)||document.querySelector("iframe[src*='"+e+"' ]");t&&(t.style.height=a.data["datawrapper-height"][e]+"px")}}))}();
        </script>
        <div class="tooltip"></div>
      </div>
    </section>
    <script type="text/javascript">
    //<![CDATA[
    
    const tooltip = document.querySelector('.tooltip');
    
    datawrapper.on('region.mouseenter', ({ chartId, data }) => {
      // first we want to check the chart id, since there
      // could be multiple charts on the page
      if (chartId === '3q6lR') {
        // now we can show tooltip. data contains the
        // data the user uploaded to the map
        tooltip.innerHTML = `<h3>${data.ID}</h3>Value: ${data.Value}`;
          tooltip.style.display = 'block';
        }
    });
    datawrapper.on('region.mouseleave', ({ chartId }) => {
      if (chartId === '3q6lR') {
        // hide the tooltip
        tooltip.style.display = 'none';
      }
    });
    
    //]]>
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
	<link rel="stylesheet" href="https://static.dwcdn.net/css/roboto-bitter.css">
	<script type="text/javascript" src="https://static.dwcdn.net/js/events.js"></script>
	<style type="text/css">
	h1 { font-family: Bitter; font-size: 32px; margin: 3em 0 1em; }
	p { font-family: Roboto; line-height:1.35 }
	pre { font-family: 'Roboto Mono'; }
	p,h1,pre {
	max-width: 480px;
	margin: 1em auto!important;
	}
	tt {
	background: #eee;
	padding: 1px 3px;
	color: #444;
	}
	a tt {
	color: inherit;
	background: transparent;
	}
	pre {
	max-width:600px;
	font-family: monospace;
	background: #f2f2f2;
	border: 1px solid #ddd;
	padding: 2ex;
	font-size: 14px;
	}

	.tooltip {
	position: fixed;
	left: 5px;
	right: 5px;
	bottom: 5px;
	background: #fffbc1;
	padding: 10px;
	border: 1px solid #f9c96d;
	display: none;
	}
	.tooltip h3 {
	margin: 0;
	}
	iframe {
	border: 1px solid #39f3bb;
	}
	</style>
	<script id="insert"></script>
	</head>
	<body>
	<section class="section">
	<div class="container">
	<div class="block">
	<h1 class="title">External tooltips</h1>
	<p>External tooltips can be used to display the tooltips <strong>outside of the iframe</strong>. 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 <strong>especially useful on mobile devices</strong>.
	</p>
	<p>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.</p>
	<p>But first, let's embed a map in between this paragraph and the following paragraph</p>
	<div style="max-width:840px;margin: 1em auto">
	<iframe title="Map with tooltips activated, but empty templates" aria-label="Map" id="datawrapper-chart-3q6lR" src="https://local-dw-gka.s3.amazonaws.com/3q6lR/5/index.html" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important;" height="473"></iframe>
	</div>
	<p>
	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).
	</p>
	<p>
	To achieve this effect, the embedding website need to communicate with the visualization code inside the iframe. This is made possible by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><tt>window.postMessage()</tt></a> 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 <a href="https://developer.datawrapper.de/docs/listening-to-chart-interaction-events">in our developer documentation</a> or by keeping on reading this page :)
	</p>
	<p>
	First, you need to embed our <a href="//static.dwcdn.net/js/events.js"><tt>events.js</tt></a> script. Then you can use <tt>datawrapper.on()</tt> to listen to visualization events. To show tooltips we need to listen to the <tt>region.mouseenter</tt> event, to hide tooltips we need the <tt>region.mouseleave</tt> event.
	</p>
	<pre><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></pre>
	<p>
	The <tt>events.data</tt> 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 <a href="view-source:https://bl.ocks.org/gka/raw/af7c931cd5b579ebec03589cc34b6358/">source code of this page</a>.
	</p>
	<p>
	If you have further questions, feel free to send us an email at <a href="mailto:[email protected]?subject=External tooltips">[email protected]</a> 👋.
	</p>
	</div>
	<script type="text/javascript">
	!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"])for(var e in a.data["datawrapper-height"]){var t=document.getElementById("datawrapper-chart-"+e)\|\|document.querySelector("iframe[src*='"+e+"' ]");t&&(t.style.height=a.data["datawrapper-height"][e]+"px")}}))}();
	</script>
	<div class="tooltip"></div>
	</div>
	</section>
	<script type="text/javascript">
	//<![CDATA[

	const tooltip = document.querySelector('.tooltip');

	datawrapper.on('region.mouseenter', ({ chartId, data }) => {
	// first we want to check the chart id, since there
	// could be multiple charts on the page
	if (chartId === '3q6lR') {
	// now we can show tooltip. data contains the
	// data the user uploaded to the map
	tooltip.innerHTML = `<h3>${data.ID}</h3>Value: ${data.Value}`;
	tooltip.style.display = 'block';
	}
	});
	datawrapper.on('region.mouseleave', ({ chartId }) => {
	if (chartId === '3q6lR') {
	// hide the tooltip
	tooltip.style.display = 'none';
	}
	});

	//]]>
	</script>
	</body>
	</html>