Tooltip

# Features

• Show tooltip on hover and focus.
• Hide on pointer down or by pressing the Escape key.
• Labeling support for screen readers.
• Custom delay support.

# Dependencies

This module depends on @floating-ui/dom.

# Anatomy

Typically, a popover consists of:

• Trigger: The element that triggers the popover.
• Popover: The overlay, which is positioned relative to the trigger, and may contain
  • Close Button: An optional element to close the popover.
  • Arrow: An optional element that points to the trigger.

<script>
	import { createPopover } from '@grail-ui/svelte';

	const { usePopoverTrigger, triggerAttrs, usePopover, popoverAttrs, closeButtonAttrs, open } = createPopover();
</script>

<button use:usePopoverTrigger {...$triggerAttrs}>Click</button>

{#if $open}
	<section use:usePopover {...$popoverAttrs}>
		<div>
			Content
		</div>
		<button {...$closeButtonAttrs}>Close</button>
	</section>
{/if}

# Examples

# Customize delay

Tooltips are designed to appear either after a brief delay when the user hovers over the trigger, or immediately when the user uses keyboard focus. The openDelay property can be used to customize the delay for hover-triggered tooltips. Similarly, tooltips are programmed to disappear after a short delay once the user stops hovering over the trigger, or immediately when the user moves away from keyboard focus. The closeDelay property can be used to adjust the delay for hover-triggered tooltips.

createTooltip({
	
openDelay: 500,
	
closeDelay: 0,
})

# Changing placement

The tooltip uses floating-ui for dynamic positioning, which allows you to change its placement by passing a positioning object, that can its alignment, offset, and flip behavior. See all the available options.

createTooltip({
	
positioning: {
		
placement: "bottom",
		
gutter: 10
	
},
})

# Custom portal container

If you want to customize the element that your tooltip portals into, use the portal and pass the actual element or a CSS selector.

createTooltip({
	
portal: '#custom',
})

# API

# TooltipConfig

# TooltipReturn

# PositioningOptions