tum
/
freight


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html> <title>SVG Visual Test</title>

<style>
  @import '/reset.css';
  svg {
    width: 200px;
    height: 200px;
    padding: 20px;
  }

  .popper {
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    box-shadow: inset 0 0 0 1px black;
  }
</style>

<svg
  id="reference-1"
  class="reference"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  fill="red"
>
  <rect width="200" height="200" />
</svg>

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect
    id="reference-2"
    class="reference"
    width="200"
    height="200"
    fill="tomato"
  />
</svg>
<div class="popper" id="popper-1">Popper Box</div>
<div class="popper" id="popper-2">Popper Box</div>

<script type="module">
  import { createPopper } from './dist/popper.js';

  const n = document.querySelectorAll('.popper').length;

  for (let i = 1; i < n + 1; i++) {
    const reference = document.querySelector(`#reference-${i}`);
    const popper = document.querySelector(`#popper-${i}`);
    createPopper(reference, popper, {
      placement: 'right',
    });
  }
</script>