STooltip

<STooltip> is a component to display small popup text on any given component.

@globalbrain/sefirot/lib/components/STooltip.vue

Hover this text.

Usage

Import <STooltip> component and pass in tooltip text as a prop.

<script setup lang="ts">
import STooltip from '@globalbrain/sefirot/lib/components/STooltip.vue'
</script>

<template>
  <STooltip text="Tooltip text.">
    Hover this text
  </STooltip>
</template>

You may also pass in the text as slot. This is useful when you want to add HTML element such as link to within tooltip.

<script setup lang="ts">
import STooltip from '@globalbrain/sefirot/lib/components/STooltip.vue'
</script>

<template>
  <STooltip>
    <template #default>
      Hover this text
    </template>
    <template #text>
      Tooltip text with <a href="...">link</a>.
    </template>
  </STooltip>
</template>

Props

Here are the list of props you may pass to the component.

:tag

Defines the HTML tag for the pill. Any value passed to this prop will used as <component :is="tag">. The default tag for the button is span.

interface Props {
  tag?: string
}

<STooltip tag="div" text="...">
  ...
</STooltip>

:triggerTag

Defines the HTML tag for the trigger element. Any value passed to this prop will used as <component :is="triggerTag">. The default tag for the trigger element is span.

interface Props {
  triggerTag?: string
}

<STooltip triggerTag="div" text="...">
  ...
</STooltip>

Note that setting this to something other than span is required when you want to put block elements within the trigger element.

:text

Defines the content of tooltip.

interface Props {
  text?: string
}

<STooltip text="Tooltip text.">
  ...
</STooltip>

:position

Defines the position of the tooltip. Defaults to 'top'.

interface Props {
  position?: 'top' | 'right' | 'bottom' | 'left'
}

<STooltip text="..." position="bottom">
  ...
</STooltip>

:display

Defines the css display property of the tooltip. Defaults to undefined.

interface Props {
  display?: 'inline' | 'inline-block' | 'block'
}

<STooltip text="..." display="inline-block">
  ...
</STooltip>

:trigger

Defines the trigger event to show the tooltip. Defaults to 'hover'.

interface Props {
  trigger?: 'hover' | 'focus' | 'both'
}

<STooltip text="..." trigger="focus">
  ...
</STooltip>

:timeout

Defines the timeout in milliseconds to hide the tooltip. Used only when trigger is set to 'focus' or 'both'. Defaults to undefined (the tooltip will not hide automatically).

interface Props {
  timeout?: number
}

<STooltip text="..." trigger="focus" timeout="1000">
  ...
</STooltip>

:tabindex

Defines the tabindex attribute of the tooltip. Defaults to 0. Useful when nesting focusable elements like buttons within the tooltip.

interface Props {
  tabindex?: number
}

<STooltip text="..." tabindex="-1">
  ...
</STooltip>

Slots

Here are the list of slots you may define within the component.

#default

The content that a user would hover over to display tooltip.

<STooltip text="Tooltip text.">
  Hover this text
</STooltip>

#text

The content of tooltip. Same as text prop. When text prop and this slot are defined at the same time, this slot will take precedence.

<STooltip>
  <template #default>
    Hover this text
  </template>
  <template #text>
    Tooltip text with <a href="...">link</a>.
  </template>
</STooltip>

Styles

You may customize the styles by overriding --tooltip prefixed CSS variables.

Available styles

Override following styles to customize the component.

:root {
  /**
   * Set `max-width` of the tooltip. The tooltip content text
   * gets wrapped when the tooltip hits this size.
   */
  --tooltip-max-width: 288px;

  /* Colors of tooltip. */
  --tooltip-border-color: var(--c-divider-2);
  --tooltip-text-color: var(--c-text-1);
  --tooltip-bg-color: var(--c-bg-elv-4);
}