Popup and viewport anchoring

[j3rem1e]

The various popup shown can be placed outside the viewport, making them hard to view/use.

For example, a tooltip can be partially hidden if the activator is in the right of the screen, or a menu can be longer than the viewport height.

Smelte should probably provides utils to position popup on the viewport.

(by the way, thanks for your work, smelte is great :)

[ajitsinghkamal]

@matyunya A more straightforward way would be to use popper.js to manage the positioning of such popups. I can try and open PR for that if that's ok.

[i8ramin]

Would love to see this! Yes please open a PR

[i8ramin]

FYI, here is my code for a custom Menu implementation using popper.js + svelte-popperjs. Its a mashup of code borrowed from the Menu implementation from Smelte and code from the demo for svelte-popperjs. Just sharing just in case it helps.

<script lang="ts">
  import type { Placement } from '@popperjs/core/lib'
  import { createPopperActions } from 'svelte-popperjs'

  import { fly } from 'svelte/transition'
  import { quadOut, quadIn } from 'svelte/easing'

  export let open = false

  const inProps = { y: 10, duration: 200, easing: quadIn }
  const outProps = { y: -10, duration: 100, easing: quadOut, delay: 100 }

  const [popperRef, popperContent] = createPopperActions()
  const popperOptions = {
    placement: 'bottom-start' as Placement,
    modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
  }
</script>

<svelte:window on:click={() => (open = false)} />

<div
  use:popperRef
  on:click={(event) => {
    // stop event propagation so we don't trigger
    // the svelte:window on:click above
    event.stopPropagation()
    open = !open
  }}
>
  <slot name="trigger" />
</div>

{#if open}
  <div id="tooltip" class="absolute z-10" use:popperContent={popperOptions}>
    <div class="w-auto bg-white rounded elevation-3" in:fly={inProps} out:fly={outProps}>
      <slot />
    </div>
  </div>
{/if}