Popover

        <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);
          }
        </style>

        <table class="grid">
          <tbody><tr>
            <td><button class="box" id="target_1" aria-haspopup="dialog">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="toggleHeader();">Toggle Header (h)</a> |
          <a href="#" class="coral-Link" onclick="toggleFooter();">Toggle Footer (j)</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="cycleVariant();">Cycle variant (v)</a>
        </section>

        <coral-popover id="popover" target="#target_1" interaction="off">
          <coral-popover-header>Popover Header</coral-popover-header>
          <coral-popover-content>
            This is typical popover content.<br>
            There may be multiple lines and various items in the content.
          </coral-popover-content>
          <coral-popover-footer>
            Popover Footer
          </coral-popover-footer>
        </coral-popover>

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

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

            var variant = [
              'default',
              'error',
              'warning',
              'success',
              'info',
              'help'
            ];
            variant.curIndex = 0;

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

            window.cycleTargets = function() {
              var curTarget = document.querySelector(target[target.curIndex % target.length]);
              curTarget.removeAttribute('aria-haspopup');
              curTarget.removeAttribute('aria-expanded');

              var newTarget = target[++target.curIndex % target.length];
              document.querySelector(newTarget).setAttribute('aria-haspopup', 'dialog');
              popover.target = newTarget;
              console.log('target changed to', popover.target);
            };

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

            window.cycleVariant = function() {
              popover.variant = variant[++variant.curIndex % variant.length];
              console.log('variant changed to', popover.variant);
            };

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

            window.toggleHeader = function() {
              popover.header.textContent = popover.header.textContent ? '' : 'Popover Header';
            };

            window.toggleFooter = function() {
              popover.footer.textContent = popover.footer.textContent ? '' : 'Popover Footer';
            };

            Coral.keys.on('f', cyclePointFrom);
            Coral.keys.on('a', cycleTargets);
            Coral.keys.on('t', toggleVisibility);
            Coral.keys.on('h', toggleHeader);
            Coral.keys.on('j', toggleFooter);
            Coral.keys.on('v', cycleVariant);
          });
        </script>