svelte-pops
NPM Github
Introduction
OverviewConfiguration'modal-open:' Variant How anchor worksModal : init actionTooltip : init action
Modal Props
ReferenceContent & StylesInteractivityPlacementTooltip in ModalsClose DialogShallow RoutingStop scroll
Tooltip
Props
Typescript
Modal TypesTooltip Types
Tooltip
Props
disabled
enableOnMobile
onMouse
hideMS
tweenDuration
modalOffset
modalShift
placement

Advanced

class string. For styling tooltip with tailwindcss.

children Snippet rendered in the tooltip element.

middleware Array of Floating-ui middlewares. Configure your own, if you want, by following @floating-ui/dom documentation.

Default middlewares

typescript
import { flip, offset, shift } from '@floating-ui/dom';

middleware = [offset(props.modalOffset), flip(), shift({ padding: props.modalShift })]

noDefaultAnchor For removing the default anchor like you would for modals. Learn more in How anchor works section.

in SvelteTransition.

out SvelteTransition.

svelte
<script lang="ts">
    let tooltipProps: TooltipProps = $state({});
</script>

{#snippet tooltip()}
	My tooltip content
{/snippet}

<button>
    Button one
    <Modal {tooltipProps} {tooltip}>Modal content</Modal>
</button>

<button>
    Button two
    <Modal {tooltipProps} {tooltip}>Modal content</Modal>
</button>