Overlay

        <style>
          .grid {
            width: 100%;
            height: 100%;
            text-align: center;
          }

          .grid-center {
            width: 10rem;
            height: 10rem;
          }

          .box {
            width: 10rem;
            height: 10rem;
            border: 1px dashed #333;
            background: rgba(255, 255, 255, .5);
          }

          coral-overlay {
            padding: 5px;
            text-align: center;
            border-radius: 5px;
            border: 1px dashed #333;
            background: rgba(255, 255, 255, .5);
          }
        </style>

        <table class="grid">
          <tbody><tr>
            <td><button class="box" id="target_1">Target 1</button></td>
            <td></td>
            <td><button class="box" id="target_2">Target 2</button></td>
          </tr>
          <tr>
            <td></td>
            <td class="grid-center"><button class="box" id="target_3">Target 3</button></td>
            <td></td>
          </tr>
          <tr>
            <td><button class="box" id="target_4">Target 4</button></td>
            <td></td>
            <td><button class="box" id="target_5">Target 5</button></td>
          </tr>
        </tbody></table>

        <section style="margin-top:15px;">
          <a href="#" class="coral-Link" onclick="toggleVisibility(); ">Toggle (t)</a> |
          <a href="#" class="coral-Link" onclick="toggleInner(); ">Toggle inner (i)</a> |
          <a href="#" class="coral-Link" onclick="cycleTargets(); ">Cycle target (a)</a> |
          <a href="#" class="coral-Link" onclick="cyclePointFrom(); ">Cycle placement (f)</a> |
          <a href="#" class="coral-Link" onclick="cyclePointFrom(); ">Cycle collision (p)</a> |
          <a href="#" class="coral-Link" onclick="increaseLengthOffset(); ">Increase length offset (c)</a> |
          <a href="#" class="coral-Link" onclick="decreaseLengthOffset(); ">Decrease length offset (v)</a> |
          <a href="#" class="coral-Link" onclick="increaseBreadthOffset(); ">Increase breadth offset (n)</a> |
          <a href="#" class="coral-Link" onclick="decreaseBreadthOffset(); ">Decrease breadth offset (m)</a> |
          <a href="#" class="coral-Link" onclick="restoreOffsets(); ">Restore offsets (z)</a> |
        </section>

        <coral-overlay id="overlay" target="#target_1" style="width:200px">
          This is typical overlay content.
        </coral-overlay>

        <script>
          window.addEventListener('load', function() {
            var target = [
              '#target_1',
              '#target_2',
              '#target_3',
              '#target_4',
              '#target_5'
            ];
            target.curIndex = 0;

            var placement = [
              'right',
              'bottom',
              'left',
              'top'
            ];
            placement.curIndex = 0;

            var collision = [
              'flip',
              'fit',
              'none'
            ];
            collision.curIndex = 0;

            var overlay = document.getElementById('overlay');
            overlay.show();

            window.cycleTargets = function() {
              overlay.target = target[++target.curIndex % target.length];
              console.log('target changed to', overlay.target);
            };

            window.cyclePointFrom = function() {
              overlay.placement = placement[++placement.curIndex % placement.length];
              console.log('placement changed to', overlay.placement);
            };

            window.toggleVisibility = function() {
              overlay.open = !overlay.open;
            };

            window.toggleInner = function() {
              overlay.inner = !overlay.inner;
            };

            window.cycleCollision = function() {
              overlay.collision = collision[++collision.curIndex % collision.length];
              console.log('collision changed to', collision.placement);
            };

            window.increaseLengthOffset = function() {
              overlay.lengthOffset = parseInt(overlay.lengthOffset) + 5;
              console.log('lengthOffset changed to', overlay.lengthOffset);
            };

            window.increaseBreadthOffset = function() {
              overlay.breadthOffset = parseInt(overlay.breadthOffset) + 5;
              console.log('breadthOffset changed to', overlay.breadthOffset);
            };

            window.decreaseLengthOffset = function() {
              overlay.lengthOffset = parseInt(overlay.lengthOffset) - 5;
              console.log('lengthOffset changed to', overlay.lengthOffset);
            };

            window.decreaseBreadthOffset = function() {
              overlay.breadthOffset = parseInt(overlay.breadthOffset) - 5;
              console.log('breadthOffset changed to', overlay.breadthOffset);
            };

            window.restoreOffsets = function() {
              overlay.lengthOffset = 0;
              overlay.breadthOffset = 0;
              console.log('lengthOffset changed to 0');
              console.log('breadthOffset changed to 0');
            };

            Coral.keys.on('f', cyclePointFrom);
            Coral.keys.on('a', cycleTargets);
            Coral.keys.on('t', toggleVisibility);
            Coral.keys.on('i', toggleInner);
            Coral.keys.on('p', cycleCollision);
            Coral.keys.on('c', increaseLengthOffset);
            Coral.keys.on('v', decreaseLengthOffset);
            Coral.keys.on('n', increaseBreadthOffset);
            Coral.keys.on('m', decreaseBreadthOffset);
            Coral.keys.on('z', restoreOffsets);
          });
        </script>