Tooltip

        <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">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="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-tooltip id="tooltip" target="#target_1">
          This is typical tooltip content.
          There may be multiple lines and various items in the content, but line breaks are discouraged.
        </coral-tooltip>

        <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 variant = [
              'info',
              'error',
              'warning',
              'success',
              'inspect'
            ];
            variant.curIndex = 0;

            function updateAriaDescribedby() {
              target.forEach(function(selector) {
                var targetElement = document.querySelector(selector);
                if (selector === tooltip.target) {
                  targetElement.setAttribute('aria-describedby', tooltip.id);
                }
                else {
                  targetElement.removeAttribute('aria-describedby');
                }
              });
            }

            var tooltip = document.getElementById('tooltip');
            updateAriaDescribedby();
            tooltip.show();

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

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

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

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

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