Install using npm

npm install svelte-pops

Enable tailwindcss for svelte-pops

The package may not work properly if you don't declare svelte-pops as a source to be detected by Tailwindcss. To solve this problem, go to your main style-sheet and add the source:

@source "../node_modules/svelte-pops/";

Init context

You need to init modal context on your top layout.

<script>
	import { initModalContext } from 'svelte-pops';
	initModalContext();
</script>

initModalContext() function takes an optional parameter options to configure the default properties of your project's tooltips and modals.

options?: { defaultModalProps?: ModalProps; defaultTooltipProps: TooltipProps }

Further configuration

Look at the 'modal-open:' Variant section to learn how to style your anchor based on the openned state of its modal.