diff --git a/examples/full-screen.html b/examples/full-screen.html
index f93bdbffa8..e3566d3709 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -1,34 +1,80 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-    <head>
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-        <style type="text/css">
-            html, body, #map {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .overlay {
-                display: none;
-            }
-            .ol-overlaycontainer .overlay {
-                display: block;
-            }
-            #vienna {
-                font-family: Verdana, Arial, Helvetica, sans-serif;
-                font-size: 11pt;
-                color: white;
-                text-shadow: black 0.1em 0.1em 0.2em;
-            }
-        </style>
-        <link rel="stylesheet" href="../css/ol.css" type="text/css">
-        <title>ol3 full-screen demo</title>
-    </head>
-    <body>
-        <div id="map">
-          <div class="overlay" id="vienna">Vienna</div>
-        </div>
-        <script src="loader.js?id=full-screen" type="text/javascript"></script>
-    </body>
+  <head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <style type="text/css">
+      html, body, #map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .overlay {
+        display: none;
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 10pt;
+      }
+      .ol-overlaycontainer .overlay {
+        display: block;
+      }
+      #vienna {
+        text-decoration: none;
+        color: white;
+        font-size: 11pt;
+        font-weight: bold;
+        text-shadow: black 0.1em 0.1em 0.2em;
+      }
+      #popup {
+      	width: 200px;
+      	margin-left: -107px;
+      	margin-bottom: 12px;
+      }
+      
+      
+      /* Popup CSS generated with http://cssarrowplease.com/ */
+      
+      .arrow_box {
+      	position: relative;
+      	background: #88b7d5;
+      	border: 2px solid #c2e1f5;
+      	border-radius: 5px;
+      	padding: 5px;
+      }
+      .arrow_box:after, .arrow_box:before {
+      	top: 100%;
+      	border: solid transparent;
+      	content: " ";
+      	height: 0;
+      	width: 0;
+      	position: absolute;
+      	pointer-events: none;
+      }
+
+      .arrow_box:after {
+      	border-color: rgba(136, 183, 213, 0);
+      	border-top-color: #88b7d5;
+      	border-width: 10px;
+      	left: 50%;
+      	margin-left: -10px;
+      }
+      .arrow_box:before {
+      	border-color: rgba(194, 225, 245, 0);
+      	border-top-color: #c2e1f5;
+      	border-width: 13px;
+      	left: 50%;
+      	margin-left: -13px;
+      }
+    </style>
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <title>ol3 full-screen demo</title>
+  </head>
+  <body>
+    <div id="map">
+      <!-- Clickable label for Vienna -->
+      <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
+      <!-- Popup -->
+      <div class="overlay arrow_box" id="popup"></div></span>
+    </div>
+    <script src="loader.js?id=full-screen" type="text/javascript"></script>
+  </body>
 </html>
diff --git a/examples/full-screen.js b/examples/full-screen.js
index 979290ea66..d321cc865f 100644
--- a/examples/full-screen.js
+++ b/examples/full-screen.js
@@ -3,6 +3,7 @@ goog.require('goog.debug.Logger');
 goog.require('goog.debug.Logger.Level');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
+goog.require('ol.CoordinateFormat');
 goog.require('ol.Map');
 goog.require('ol.MapOptions'); // FIXME this should not be required
 goog.require('ol.overlay.Overlay');
@@ -23,9 +24,25 @@ var map = new ol.Map(document.getElementById('map'), {
   layers: new ol.Collection([layer]),
   zoom: 2
 });
+
+// Vienna label
 var vienna = new ol.overlay.Overlay({
   map: map,
   coordinate: ol.Projection.transformWithCodes(
       new ol.Coordinate(16, 48), 'EPSG:4326', 'EPSG:3857'),
   element: document.getElementById('vienna')
 });
+
+// Popup showing the position the user clicked
+var popup = new ol.overlay.Overlay({
+  map: map,
+  element: document.getElementById('popup')
+});
+map.addEventListener('click', function(evt) {
+  var coordinate = evt.getCoordinate();
+  popup.getElement().innerHTML =
+      'Welcome to ol3. The location you clicked was<br>' +
+      ol.CoordinateFormat.hdms(ol.Projection.transformWithCodes(
+          coordinate, 'EPSG:3857', 'EPSG:4326'));
+  popup.setCoordinate(evt.getCoordinate());
+});
