Tooltip

A <Callout> shown when the mouse hovers over a reference element for a specific duration

Code

<script lang="ts">
  import { Tooltip } from '@geoffcox/sterling-svelte';
  
  let reference: HTMLElement;
</script>

<div bind:this={reference}>The reference anchor for positioning the callout.</div>

<Tooltip hoverDelayMilliseconds="1000" open {reference}>
  <div class="reference">The reference anchor for positioning the Tooltip.</div>
  <div class="tip-text" slot="tip">sterling-svelte</div>
</Tooltip>

Members

	Property Name	Type	Default	Comment
	disabled	boolean	false	When true, the tooltip is disabled and will not be shown.
	hoverDelayMilliseconds	number	1000	The duration of mouse hover before showing the tooltip.

Considerations

The tooltip is anchored to a sibling element that appears directly after the default slot content.
Includes Callout props, event, and methods

Anatomy

<slot {disabled} {hoverDelayMilliseconds} {open} {variant} />
<!-- hidden anchor point -->
<div class="sterling-tooltip-origin" />
<Callout>
  <slot name="tip" {placement} {variant} />
</Callout>