` tag is auto-generated by Shiki; target utility classes with: `[&>pre]:myClassHere`.

## Programmatic Usage


	
This use case falls outside the scope of Skeleton. The following is provided merely as guidance.


In some cases you may not have direct access to the source code, such as content from a blog posts or CMS pages. In fact the code may even come pre-baked with surrounding `
` or `` elements. For this, you'll need to follow the general steps below. Specific implementation may differ based on your app and meta-framework.

1. Query all `
` or `` blocks using Javascript tools like `document.querySelectorAll()`. Be as specific as possible.
2. Ensure you have a clean instance of the source code itself, with no extra markup injected within.
3. Use Shiki's [codeToHtml](https://shiki.style/guide/install#shorthands) feature to parse the code as styled HTML markup.
4. Then append each instance of the code blocks in your DOM.

For more instructions, please refer to this guide by [Joy of Code](https://joyofcode.xyz/) explaining how to [implement Shiki via MDX](https://joyofcode.xyz/sveltekit-markdown-blog#using-components-inside-markdown).

## Custom Themes

Shiki provides support for generating a custom highlighter theme:

- [Loading Custom Themes](https://shiki.style/guide/load-theme)
- [List of Bundled Themes](https://shiki.style/themes)

Shiki theme values can be defined using Skeleton custom theme properties, such as `rgba(--color-primary-500)`.

## Accessibility

See [Salma Alam-Naylor's](https://whitep4nth3r.com/about/) guidelines for [creating accessible code blocks](https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/) that meet WGAC standards.

---

# Popover
Learn how to integrate dynamic and interactive popover interfaces.

## Warning


	The following components have been introduced as a temporary solution until either Floating UI provides Svelte bindings, the upcoming
	native browser APIs become widely available, or another alternative is introduced (whichever comes first). Until that time, Skeleton will
	continue to maintain these components for production use. Maintenance will continue until the next major version of Skeleton if an
	alternative is introduced.


The following popover components are built using [Zag.js](https://zagjs.com/) primitives, and utilize [Floating UI](https://floating-ui.com/) to control positioning and anchoring of each related element.

---

## Z-Index

Neither Skeleton, Zag, or Floating UI take an opinionated stance regarding z-index stacking. This means elements may be occluded beneath other elements with a higher index. To adjust this value, set `zIndex` with a raw CSS value, such as `10`, `20`, `999` - provided as a string. Note that this property does not accept utility classes.

```svelte

	

```

- `zIndex="z-50"` - This will NOT work.
- `zIndex={99}` - This will NOT work.
- `zIndex="99"` - This will work as expected.

## Arrows

Both `` and `` allow for arrows. Skeleton follows [Zag's conventions](https://zagjs.com/components/svelte/tooltip#styling-the-arrow) for styling arrows. Add the `arrow` prop to enable the arrow, then use the following to adjust each style. Note these properties do not accept utility classes.

| Prop Name         | CSS Custom Property  | Demo                                                      |
| ----------------- | -------------------- | --------------------------------------------------------- |
| `arrow`           | -                    | ``                                         |
| `arrowBackground` | `--arrow-background` | `` |
| `arrowSize`       | `--arrow-size`       | ``                              |


```svelte

	...

```

---

## Popover

Triggers an anchored popover when you click the trigger element. [View API Reference](https://zagjs.com/components/react/popover#methods-and-properties).

```svelte


 (openState = e.open)}
	positioning={{ placement: 'top' }}
	triggerBase="btn preset-tonal"
	contentBase="card bg-surface-200-800 p-4 space-y-4 max-w-[320px]"
	arrow
	arrowBackground="!bg-surface-200 dark:!bg-surface-800"
>
	{#snippet trigger()}Click Me{/snippet}
	{#snippet content()}
		

			
Popover Example
			
		
		

			

				This will display a basic popover with a header and body. This also includes a title, description, and close button.
			
		
	{/snippet}


```

### Anatomy


	
	
		
		
	


### API Reference

## Tooltip

Triggers an anchored popover when you hover the trigger element. [View API Reference](https://zagjs.com/components/react/tooltip#methods-and-properties).

```svelte


 (openState = e.open)}
	positioning={{ placement: 'top' }}
	triggerBase="underline"
	contentBase="card preset-filled p-4"
	openDelay={200}
	arrow
>
	{#snippet trigger()}Hover Me{/snippet}
	{#snippet content()}This is a tooltip.{/snippet}


```

### Anatomy


	
	
		
		
	


### API Reference

## Combobox

Triggers an anchored popover list when you tap the arrow. Includes auto-suggestion via typeahead. [View API Reference](https://zagjs.com/components/react/combobox#methods-and-properties).

```svelte


 (selectedCountry = e.value)}
	label="Select Country"
	placeholder="Select..."
>
	
	{#snippet item(item)}
		

			{item.label}
			{item.emoji}
		
	{/snippet}


```

### Anatomy


	
		
		
			
			
				
			
		
	
	
		
			
		
	


### API Reference

## Modal

Generate modals or dialogs that require a user's immediate attention. [View API Reference](https://zagjs.com/components/react/dialog#methods-and-properties).

```svelte


 (openState = e.open)}
	triggerBase="btn preset-tonal"
	contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-screen-sm"
	backdropClasses="backdrop-blur-sm"
>
	{#snippet trigger()}Open Modal{/snippet}
	{#snippet content()}
		

			
Modal Example
		
		

			

				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
				voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
			
		
		
	{/snippet}


```

```svelte




 (drawerState = e.open)}
	triggerBase="btn preset-tonal"
	contentBase="bg-surface-100-900 p-4 space-y-4 shadow-xl w-[480px] h-screen"
	positionerJustify="justify-start"
	positionerAlign=""
	positionerPadding=""
	transitionsPositionerIn={{ x: -480, duration: 200 }}
	transitionsPositionerOut={{ x: -480, duration: 200 }}
>
	{#snippet trigger()}Open Drawer{/snippet}
	{#snippet content()}
		

			
Drawer Example
		
		

			

				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
				voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
			
		
		
	{/snippet}


```

### Anatomy


	
	
	
		
	


### API Reference

## Alternatives

### Svelte Attachment

For power users, we realize the above components may not cover all use cases. As such, we've provided a baseline Svelte attachment for a more direct integration with the Floating UI DOM library. [View our guide here](/docs/guides/cookbook/floating-ui-attachments).

### Native Browser APIs

Skeleton will always favor native browser APIs over third-party libraries such as Floating UI Svelte. The following is a list of current and upcoming incoming APIs we will aim to support in the future, but are not quite standardized cross-browser yet.

- [Dialog Cookbook](/docs/guides/cookbook/dialog)
- [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [CSS Anchoring Position](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)

---