Popup

<gstock-popup> | GstockPopup

Active

Arrow

<gstock-popup placement="top" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<style>
  gstock-popup {
    --arrow-color: rgb(26, 51, 78);
  }

  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }
</style>

<div class="playground-controls">
  <div>
    <gstock-select
      class="popup-overview-select"
      label="Placement"
      name="placement"
      size="small"
      value="top">
      <gstock-option value="top">top</gstock-option>
      <gstock-option value="top-start">top-start</gstock-option>
      <gstock-option value="top-end">top-end</gstock-option>
      <gstock-option value="bottom">bottom</gstock-option>
      <gstock-option value="bottom-start">bottom-start</gstock-option>
      <gstock-option value="bottom-end">bottom-end</gstock-option>
      <gstock-option value="right">right</gstock-option>
      <gstock-option value="right-start">right-start</gstock-option>
      <gstock-option value="right-end">right-end</gstock-option>
      <gstock-option value="left">left</gstock-option>
      <gstock-option value="left-start">left-start</gstock-option>
      <gstock-option value="left-end">left-end</gstock-option>
    </gstock-select>

    <gstock-input
      size="small"
      type="number"
      name="distance"
      label="Distance:"
      value="0"></gstock-input>

    <gstock-input
      size="small"
      type="number"
      name="skidding"
      label="Skidding:"
      value="0"></gstock-input>
  </div>

  <div>
    <gstock-switch name="active" size="small" checked>Active</gstock-switch>
    <gstock-switch name="arrow" size="small">Arrow</gstock-switch>
  </div>

  <script type="module">
    
    const popup = document.querySelector('gstock-popup');
    const select = document.querySelector('gstock-select[name="placement"]');
    const distance = document.querySelector('gstock-input[name="distance"]');
    const skidding = document.querySelector('gstock-input[name="skidding"]');
    const active = document.querySelector('gstock-switch[name="active"]');
    const arrow = document.querySelector('gstock-switch[name="arrow"]');

    select.addEventListener('gstock-change-event', () => {
      popup.placement = select.value;
    });

    distance.addEventListener('gstock-input-event', () => {
      popup.distance = distance.value;
    });

    skidding.addEventListener('gstock-input-event', () => {
      popup.skidding = skidding.value;
    });

    active.addEventListener('gstock-change-event', () => {
      popup.active = active.checked;
    });

    arrow.addEventListener('gstock-change-event', () => {
      popup.arrow = arrow.checked;
    });
  </script>

  <style>
    .playground-controls div {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 1rem;
    }

    .playground-controls div:first-child {
      margin-bottom: 1rem;
    }

    .playground-controls gstock-select {
      width: 160px;
    }

    .playground-controls gstock-input {
      width: 100px;
    }
  </style>
</div>

Activating

Popups are inactive and hidden until the active attribute is applied. Removing the attribute will tear down all positioning logic and listeners, meaning you can have many idle popups on the page without affecting performance.

Active

<gstock-popup placement="top" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-switch checked size="small">Active</gstock-switch>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const active = document.querySelector('gstock-switch');

  active.addEventListener('gstock-change-event', () => (popup.active = active.checked));
</script>

<style>
  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }
</style>

External Anchors

By default, anchors are slotted into the popup using the anchor slot. If your anchor needs to live outside of the popup, you can pass the anchor’s id to the anchor attribute. Alternatively, you can pass an element reference to the anchor property to achieve the same effect without using an id.

<span id="external-anchor"></span>

<gstock-popup anchor="external-anchor" placement="top" active>
  <div class="box"></div>
</gstock-popup>

<style>
  #external-anchor {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px 0 0 50px;
  }

  #external-anchor ~ gstock-popup .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }
</style>

Placement

Use the placement attribute to tell the popup the preferred placement of the popup. Note that the actual position will vary to ensure the panel remains in the viewport if you’re using positioning features such as flip and shift.

Since placement is preferred when using flip, you can observe the popup’s current placement when it’s active by looking at the data-current-placement attribute. This attribute will update as the popup flips to find available space and it will be removed when the popup is deactivated.

top

top-start

top-end

bottom

bottom-start

bottom-end

right

right-start

right-end

left

left-start

left-end

<gstock-popup placement="top" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-select label="Placement" size="small" value="top">
    <gstock-option value="top">top</gstock-option>
    <gstock-option value="top-start">top-start</gstock-option>
    <gstock-option value="top-end">top-end</gstock-option>
    <gstock-option value="bottom">bottom</gstock-option>
    <gstock-option value="bottom-start">bottom-start</gstock-option>
    <gstock-option value="bottom-end">bottom-end</gstock-option>
    <gstock-option value="right">right</gstock-option>
    <gstock-option value="right-start">right-start</gstock-option>
    <gstock-option value="right-end">right-end</gstock-option>
    <gstock-option value="left">left</gstock-option>
    <gstock-option value="left-start">left-start</gstock-option>
    <gstock-option value="left-end">left-end</gstock-option>
  </gstock-select>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const select = document.querySelector('gstock-select');

  select.addEventListener('gstock-change-event', () => (popup.placement = select.value));
</script>

<style>
  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }

  .options gstock-select {
    max-width: 280px;
  }
</style>

Distance

Use the distance attribute to change the distance between the popup and its anchor. A positive value will move the popup further away and a negative value will move it closer.

<gstock-popup placement="top" distance="0" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-input  size="small" type="number" min="-50" max="50" step="1" value="0" label="Distance"></gstock-input>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const distance = document.querySelector('gstock-input');

  distance.addEventListener('gstock-input-event', () => (popup.distance = distance.value));
</script>

<style>
  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }

  .options gstock-input {
    max-width: 260px;
  }
</style>

Skidding

The skidding attribute is similar to distance, but instead allows you to offset the popup along the anchor’s axis. Both positive and negative values are allowed.

<gstock-popup placement="top" skidding="0" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-input size="small" type="number" min="-50" max="50" step="1" value="0" label="Skidding"></gstock-input>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const skidding = document.querySelector('gstock-input');

  skidding.addEventListener('gstock-input-event', () => (popup.skidding = skidding.value));
</script>

<style>
  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }

  .options gstock-input {
    max-width: 260px;
  }
</style>

Arrows

Add an arrow to your popup with the arrow attribute. It’s usually a good idea to set a distance to make room for the arrow. To adjust the arrow’s color and size, use the --arrow-color and --arrow-size custom properties, respectively. You can also target the arrow part to add additional styles such as shadows and borders.

By default, the arrow will be aligned as close to the center of the anchor as possible, considering available space and arrow-padding. You can use the arrow-placement attribute to force the arrow to align to the start, end, or center of the popup instead.

anchor

start

end

center

Arrow

<gstock-popup placement="top" arrow arrow-placement="anchor" distance="8" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-select
    class="popup-overview-select"
    label="Placement"
    name="placement"
    size="small"
    value="top">
    <gstock-option value="top">top</gstock-option>
    <gstock-option value="top-start">top-start</gstock-option>
    <gstock-option value="top-end">top-end</gstock-option>
    <gstock-option value="bottom">bottom</gstock-option>
    <gstock-option value="bottom-start">bottom-start</gstock-option>
    <gstock-option value="bottom-end">bottom-end</gstock-option>
    <gstock-option value="right">right</gstock-option>
    <gstock-option value="right-start">right-start</gstock-option>
    <gstock-option value="right-end">right-end</gstock-option>
    <gstock-option value="left">left</gstock-option>
    <gstock-option value="left-start">left-start</gstock-option>
    <gstock-option value="left-end">left-end</gstock-option>
  </gstock-select>

  <gstock-select label="Arrow Placement" name="arrow-placement" size="small" value="anchor">
    <gstock-option value="anchor">anchor</gstock-option>
    <gstock-option value="start">start</gstock-option>
    <gstock-option value="end">end</gstock-option>
    <gstock-option value="center">center</gstock-option>
  </gstock-select>
</div>

<div class="options">
  <gstock-switch name="arrow" checked size="small">Arrow</gstock-switch>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const placement = document.querySelector('[name="placement"]');
  const arrowPlacement = document.querySelector('[name="arrow-placement"]');
  const arrow = document.querySelector('[name="arrow"]');

  placement.addEventListener('gstock-change-event', () => (popup.placement = placement.value));
  arrowPlacement.addEventListener(
    'gstock-change-event',
    () => (popup.arrowPlacement = arrowPlacement.value),
  );
  arrow.addEventListener('gstock-change-event', () => (popup.arrow = arrow.checked));
</script>

<style>
  gstock-popup {
    --arrow-color: rgb(26, 51, 78);
  }

  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }

  .options gstock-select {
    width: 160px;
  }

  .options + .options {
    margin-top: 1rem;
  }
</style>

Syncing with the Anchor’s Dimensions

Use the sync attribute to make the popup the same width or height as the anchor element. This is useful for controls that need the popup to stay the same width or height as the trigger.

Width

Height

Both

None

<gstock-popup placement="top" sync="width" active>
  <span slot="anchor"></span>
  <div class="box"></div>
</gstock-popup>

<div class="options">
  <gstock-select value="width" label="Sync" size="small">
    <gstock-option value="width">Width</gstock-option>
    <gstock-option value="height">Height</gstock-option>
    <gstock-option value="both">Both</gstock-option>
    <gstock-option value="">None</gstock-option>
  </gstock-select>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const fixed = document.querySelector('gstock-switch');
  const sync = document.querySelector('gstock-select');

  sync.addEventListener('gstock-change-event', () => (popup.sync = sync.value));
</script>

<style>
  span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 150px 50px 50px 50px;
  }

  .box {
    width: 100%;
    height: 100%;
    min-width: 50px;
    min-height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .options {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }
</style>

Positioning Strategy

By default, the popup is positioned using an absolute positioning strategy. However, if your anchor is fixed or exists within a container that has overflow: auto|hidden, the popup risks being clipped. To work around this, you can use a fixed positioning strategy by setting the strategy attribute to fixed.

The fixed positioning strategy reduces jumpiness when the anchor is fixed and allows the popup to break out containers that clip. When using this strategy, it’s important to note that the content will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter. Refer to this page for more details.

In this example, you can see how the popup breaks out of the overflow container when it’s fixed. The fixed positioning strategy tends to be less performant than absolute, so avoid using it unnecessarily.

Toggle the switch and scroll the container to see the difference.

<div class="popup-strategy">
  <div class="overflow">
    <gstock-popup placement="top" strategy="fixed" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </gstock-popup>
  </div>

  <gstock-switch size="small" checked>Fixed</gstock-switch>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const fixed = document.querySelector('gstock-switch');

  fixed.addEventListener(
    'gstock-change-event',
    () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'),
  );
</script>

<style>
  .popup-strategy .overflow {
    position: relative;
    height: 300px;
    border: solid 2px #c30a0a;
    overflow: auto;
  }

  .popup-strategy span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 150px 50px;
  }

  .popup-strategy .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .popup-strategy gstock-switch {
    margin-top: 1rem;
  }
</style>

Flip

When the popup doesn’t have enough room in its preferred placement, it can automatically flip to keep it in view. To enable this, use the flip attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using flip-fallback-placement and flip-fallback-strategy. Additional options are available to control the flip behavior’s boundary and padding.

Scroll the container to see how the popup flips to prevent clipping.

<div class="popup-flip">
  <div class="overflow">
    <gstock-popup placement="top" flip active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </gstock-popup>
  </div>

  <br />
  <gstock-switch size="small" checked>Flip</gstock-switch>
</div>

<style>
  .popup-flip .overflow {
    position: relative;
    height: 300px;
    border: solid 2px #c30a0a;
    overflow: auto;
  }

  .popup-flip span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 150px 50px;
  }

  .popup-flip .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }
</style>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const flip = document.querySelector('gstock-switch');

  flip.addEventListener('gstock-change-event', () => (popup.flip = flip.checked));
</script>

Flip Fallbacks

While using the flip attribute, you can customize the placement of the popup when the preferred placement doesn’t have room. For this, use flip-fallback-placements and flip-fallback-strategy.

If the preferred placement doesn’t have room, the first suitable placement found in flip-fallback-placement will be used. The value of this attribute must be a string including any number of placements separated by a space, e.g. "right bottom".

If no fallback placement works, the final placement will be determined by flip-fallback-strategy. This value can be either initial (default), where the placement reverts to the position in placement, or best-fit, where the placement is chosen based on available space.

Scroll the container to see how the popup changes it’s fallback placement to prevent clipping.

<div class="popup-flip-fallbacks">
  <div class="overflow">
    <gstock-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </gstock-popup>
  </div>
</div>

<style>
  .popup-flip-fallbacks .overflow {
    position: relative;
    height: 300px;
    border: solid 2px #c30a0a;
    overflow: auto;
  }

  .popup-flip-fallbacks span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 250px 50px;
  }

  .popup-flip-fallbacks .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }
</style>

Shift

When a popup is longer than its anchor, it risks being clipped by an overflowing previewContainer. In this case, use the shift attribute to shift the popup along its axis and back into view. You can customize the shift behavior using shiftBoundary and shift-padding.

Toggle the switch to see the difference.

<div class="popup-shift">
  <div class="overflow">
    <gstock-popup placement="top" shift shift-padding="10" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </gstock-popup>
  </div>

  <gstock-switch size="small" checked>Shift</gstock-switch>
</div>

<style>
  .popup-shift .overflow {
    position: relative;
    border: solid 2px #c30a0a;
    overflow: auto;
  }

  .popup-shift span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 60px 0 0 10px;
  }

  .popup-shift .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }
</style>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const shift = document.querySelector('gstock-switch');

  shift.addEventListener('gstock-change-event', () => (popup.shift = shift.checked));
</script>

Auto-size

Use the auto-size attribute to tell the popup to resize when necessary to prevent it from getting clipped. Possible values are horizontal, vertical, and both. You can use autoSizeBoundary and auto-size-padding to customize the behavior of this option. Auto-size works well with flip, but if you’re using auto-size-padding make sure flip-padding is the same value.

When using auto-size, one or both of --auto-size-available-width and --auto-size-available-height will be applied to the host element. These values determine the available space the popover has before clipping will occur. Since they cascade, you can use them to set a max-width/height on your popup’s content and easily control its overflow.

Scroll the container to see the popup resize as its available space changes.

<div class="popup-auto-size">
  <div class="overflow">
    <gstock-popup placement="top" auto-size="both" auto-size-padding="10" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </gstock-popup>
  </div>

  <br />
  <gstock-switch size="small" checked>Auto-size</gstock-switch>
</div>

<style>
  .popup-auto-size .overflow {
    position: relative;
    height: 300px;
    border: solid 2px #c30a0a;
    overflow: auto;
  }

  .popup-auto-size span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 250px 50px 100px 50px;
  }

  .popup-auto-size .box {
    background: rgb(26, 51, 78);
    border-radius: 4px;

    /* This sets the preferred size of the popup's content */
    width: 100px;
    height: 200px;

    /* This sets the maximum dimensions and allows scrolling when auto-size kicks in */
    max-width: var(--auto-size-available-width);
    max-height: var(--auto-size-available-height);
    overflow: auto;
  }
</style>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const autoSize = document.querySelector('gstock-switch');

  autoSize.addEventListener('gstock-change-event', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
</script>

Hover Bridge

When a gap exists between the anchor and the popup element, this option will add a “hover bridge” that fills the gap using an invisible element. This makes listening for events such as mouseover and mouseout more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.

<div class="popup-hover-bridge">
  <gstock-popup placement="top" hover-bridge distance="10" skidding="0" active>
    <span slot="anchor"></span>
    <div class="box"></div>
  </gstock-popup>

  <br>
  <gstock-switch checked>Hover Bridge</gstock-switch><br>
  <gstock-input type="number" min="0" max="50" step="1" value="10" label="Distance"></gstock-input>
  <gstock-input type="number" min="-50" max="50" step="1" value="0" label="Skidding"></gstock-input>
</div>

<style>
  .popup-hover-bridge span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px #afafaf;
    margin: 50px;
  }

  .popup-hover-bridge .box {
    width: 100px;
    height: 50px;
    background: rgb(26, 51, 78);
    border-radius: 4px;
  }

  .popup-hover-bridge gstock-input {
    max-width: 260px;
    margin-top: .5rem;
  }

  .popup-hover-bridge gstock-popup::part(hover-bridge) {
    background: tomato;
    opacity: .5;
  }
</style>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const hoverBridge = document.querySelector('gstock-switch');
  const distance = document.querySelector('gstock-input[label="Distance"]');
  const skidding = document.querySelector('gstock-input[label="Skidding"]');

  distance.addEventListener('gstock-input-event', () => (popup.distance = distance.value));
  skidding.addEventListener('gstock-input-event', () => (popup.skidding = skidding.value));
  hoverBridge.addEventListener('gstock-change-event', () => (popup.hoverBridge = hoverBridge.checked));
</script>

Virtual Elements

In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a VirtualElement to the anchor property. A virtual element must contain a function called getBoundingClientRect() that returns a DOMRect object as shown below.

const virtualElement = {
  getBoundingClientRect() {
    // ...
    return { width, height, x, y, top, left, right, bottom };
  },
};

This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to properly view it.

<div class="popup-virtual-element">
  <gstock-popup placement="right-start">
    <div class="circle"></div>
  </gstock-popup>

  <gstock-switch size="small">Highlight mouse cursor</gstock-switch>
</div>

<script type="module">
  
  const popup = document.querySelector('gstock-popup');
  const circle = document.querySelector('.circle');
  const enabled = document.querySelector('gstock-switch');

  let clientX = 0;
  let clientY = 0;

  // Set the virtual element as a property
  popup.anchor = {
    getBoundingClientRect() {
      return {
        width: 0,
        height: 0,
        x: clientX,
        y: clientY,
        top: clientY,
        left: clientX,
        right: clientX,
        bottom: clientY
      };
    }
  };

  // Only activate the popup when the switch is checked
  enabled.addEventListener('gstock-change-event', () => {
    popup.active = enabled.checked;
  });

  // Listen for the mouse to move
  document.addEventListener('mousemove', handleMouseMove);

  // Update the virtual element as the mouse moves
  function handleMouseMove(event) {
    clientX = event.clientX;
    clientY = event.clientY;

    // Reposition the popup when the virtual anchor moves
    if (popup.active) {
      popup.reposition();
    }
  }
</script>

<style>
  /* If you need to set a z-index, set it on the popup part like this */
  .popup-virtual-element gstock-popup::part(popup) {
    z-index: 1000;
    pointer-events: none;
  }

  .popup-virtual-element .circle {
    width: 100px;
    height: 100px;
    border: solid 4px #afafaf;
    border-radius: 50%;
    translate: -50px -50px;
    animation: 1s virtual-cursor infinite;
  }

  @keyframes virtual-cursor {
    0% { scale: 1; }
    50% { scale: 1.1; }
  }
</style>

Sometimes the getBoundingClientRects might be derived from a real element. In this case provide the anchor element as context to ensure clipping and position updates for the popup work well.

const virtualElement = {
  getBoundingClientRect() {
    // ...
    return { width, height, x, y, top, left, right, bottom };
  },
  contextElement: anchorElement,
};