Tooltip

A floating box of content that is automatically shown when the mouse hovers over a reference element.

Code

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

<Tooltip hoverDelayMilliseconds="1000" open {reference}>
  <!-- TODO: the reference element -->
  {#snippet tip()}
    <!-- TODO: the tip content -->
  {/snippet}
</Tooltip>

Members

Property Name	Type	Default	Comment
disabled	boolean \| null \| undefined	false	When true, the tooltip is disabled and will not be shown.
hoverDelayMilliseconds	number \| undefined	1000 (1 second)	The duration of mouse hover before showing the tooltip.
tip	string \| Snippet \| undefined	undefined	The content passed to <Callout> children.

Considerations

Includes <Callout> props, events, and methods.

Anatomy

children (Snippet>)
  reference (<div>)
  callout (<Callout>)