Tooltip

The tooltip component is a simple component that displays a tooltip when hovered over.

Basic Usage

Chips

Lozange

<spr-tooltip text="This is my tooltip text">
    <!-- Your component here -->
</spr-tooltip>

Custom Text

By adding the text prop to the tooltip component, you can customize the text that is displayed in the tooltip.

<spr-tooltip text="This is my custom tooltip text">
    <!-- Your component here -->
</spr-tooltip>

Custom Text Using HTML

You can also use HTML to further customize the text that you wanted to displayed in the tooltip by using a template named #popper-content.

Important to note:

If both text props and template #popper-content are used, the text prop will be always first displayed before the #popper-content.

<spr-tooltip text="This is my custom tooltip text">
  <template #popper-content>
    <h5>This is a sample title</h5>
  </template>

  <!-- Your component here -->
</spr-tooltip>

Plaacement

<spr-tooltip text="My tooltip" placement="top-start">
    <!-- Your component here -->
</spr-tooltip>

Distance

You can set the distance of the tooltip from the target element by using the distance prop. The default distance is 8px. You can set it to any value you want.

<spr-tooltip text="My tooltip" :distance="16">
    <!-- Your component here -->
</spr-tooltip>

Width

You can set the width of the tooltip by using the fit-content prop. By default, the tooltip will only take the width of its content. When the fit-content prop is set to false, the tooltip will take the full width of its parent container.

Using Max-width

You can enable or disable the maximum width of the tooltip by using the has-max-width prop. By default, the max-width is enabled. When the has-max-width prop is set to true, the tooltip will have a maximum width of 280px.

<spr-tooltip>
  <template #popper-content>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia, 
      ante sit amet condimentum varius, metus enim luctus magna, ut vehicula ipsum quam vel odio.
    </p>
  </template>

  <!-- Your component here -->
</spr-tooltip>

<spr-tooltip>
  <template #popper-content :has-max-width="false">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia, 
      ante sit amet condimentum varius, metus enim luctus magna, ut vehicula ipsum quam vel odio.
    </p>
  </template>

  <!-- Your component here -->
</spr-tooltip>

Dynamic Changing Tooltip Text

You can dynamically change the tooltip text by using the text prop. The tooltip will automatically update when the text prop changes.

<template>
  <spr-tooltip :text="tootltipText" :fit-content="false" show-triggers="hover" hide-triggers="hover">
    <spr-input v-model="inputValueDynamic" placeholder="Enter your text" class="spr-w-full" />
  </spr-tooltip>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const inputValueDynamic = ref('');
const tootltipText = ref('This is my tooltip text');

watch(inputValueDynamic, (newValue) => {
  tootltipText.value = newValue ? newValue : '-';
});
</script>

Triggers

You can customize the triggers for showing and hiding the tooltip by using the show-triggers and hide-triggers props. By default, the tooltip will show on hover and hide on mouse leave. You can set these props to any valid trigger events.

Possible trigger events include focus, click, hover, and touch. You can also combine triggers to show the tooltip on one event and hide it on another.

You can also combine triggers, for example, to show the tooltip on click and hide it on hover:

<template>
  <div class="spr-flex spr-gap-3">
    <spr-tooltip text="This tooltip shows on focus" show-triggers="focus" hide-triggers="blur">
      <spr-button tone="success">Focus Trigger</spr-button>
    </spr-tooltip>
    <spr-tooltip text="This tooltip shows on click" show-triggers="click" hide-triggers="click">
      <spr-button tone="success">Click Trigger</spr-button>
    </spr-tooltip>
    <spr-tooltip text="This tooltip shows on hover" show-triggers="hover" hide-triggers="hover">
      <spr-button tone="success">Hover Trigger</spr-button>
    </spr-tooltip>
  </div>

  <div class="spr-flex spr-gap-3">
    <spr-tooltip
      text="This tooltip shows on click"
      :show-triggers="['click', 'hover']"
      :hide-triggers="['click', 'hover']"
    >
      <spr-button tone="success">Click + Hover Trigger</spr-button>
    </spr-tooltip>
  </div>
</template>

API Reference

Props

Name	Description	Type	Available Values	Default
text	The content to display inside the tooltip. This can be a simple text string or more complex content.	string	Any text string	''
placement	Determines where the tooltip is positioned relative to the target element. The placement can be at the top, bottom, left, or right, with additional modifiers for start and end alignment.	string	'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'	'top'
distance	The distance in pixels between the tooltip and the target element. Increasing this value creates more space between the tooltip and its target.	number	Any positive number	6
hasMaxWidth	Controls whether the tooltip has a maximum width constraint. When enabled, the tooltip has a maximum width of 280px, which helps with long content. When disabled, the tooltip width is determined by its content.	boolean	true, false	true
fitContent	Determines if the tooltip width should fit its content or take the full width of its parent container. When true, the tooltip width adjusts to fit its content. When false, the tooltip takes the full width available.	boolean	true, false	true
showTriggers	Specifies the events that will trigger the tooltip to show. Can be a single event string or an array of event strings. Common triggers include hover (mouseenter), focus, click, and touch.	string | string[]	'hover', 'focus', 'click', 'touch', or arrays like ['hover', 'focus']	'hover'
hideTriggers	Specifies the events that will trigger the tooltip to hide. Can be a single event string or an array of event strings. Often set to match the showTriggers for consistent behavior.	string | string[]	'hover', 'focus', 'click', 'touch', or arrays like ['hover', 'focus']	'hover'
autoHide	When enabled, the tooltip will automatically hide when the cursor leaves the tooltip area. This is useful for tooltips that require interaction but should hide when no longer needed.	boolean	true, false	false

Slots

Name	Description
default	The content that will trigger the tooltip. This can be any component or HTML element that should display the tooltip when interacted with.
popper-content	Custom content to display inside the tooltip. This slot allows for more complex tooltip content beyond simple text, including HTML elements and components. If both the text prop and this slot are provided, the text prop will be displayed first, followed by this slot's content.

Product Uses