Tooltip Component

The Tooltip component is a versatile tooltip component built with Vue 3 and @floating-ui/vue. It provides a customizable tooltip interface perfect for displaying additional information on hover.

Basic Usage

Import and use Tooltip in your Vue components:

<template>
  <Tooltip :content="tooltipContent">
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

<script setup>
import { ref } from 'vue';
import { Tooltip, ButtonBase } from '@robuust-digital/vue-components';

const tooltipContent = ref('This is a tooltip');
</script>

This is a tooltip

Props

Prop	Type	Default	Description
content	String	Required	The content to display inside the tooltip
blur	Boolean	true	Apply a blur effect to the tooltip background
maxWidth	Number	null	Maximum width of the tooltip
tooltipClass	String	''	Additional CSS classes to apply to the tooltip
placement	String	undefined	Placement of the tooltip relative to the target element. If not configured manually @floating-ui/vue will determine the best placement.

Placement tip

In most cases you don't need to set the placement prop manually. The tooltip will automatically determine the best placement based on the available space. However, you can set the placement prop to one of the available values to force a specific placement. See the Placement Values section for more details.

Placement Values

The placement prop accepts the following values:

• Basic Positions:

  • top - Tooltip appears above the element
  • right - Tooltip appears to the right of the element
  • bottom - Tooltip appears below the element
  • left - Tooltip appears to the left of the element

• Start Variations:

  • top-start - Tooltip appears above, aligned with start edge
  • right-start - Tooltip appears right, aligned with start edge
  • bottom-start - Tooltip appears below, aligned with start edge
  • left-start - Tooltip appears left, aligned with start edge

• End Variations:

  • top-end - Tooltip appears above, aligned with end edge
  • right-end - Tooltip appears right, aligned with end edge
  • bottom-end - Tooltip appears below, aligned with end edge
  • left-end - Tooltip appears left, aligned with end edge

Slots

Default Slot

The main content area that triggers the tooltip.

<template>
  <Tooltip content="Default slot">
    <button>Hover me</button>
  </Tooltip>
</template>

Content Slot

Customize the content inside the tooltip.

<template>
  <Tooltip content="Tooltip with Custom Content slot">
    <template #content="{ content }">
      <div class="custom-tooltip-content">
        {{ content }}
      </div>
    </template>
    <button>Hover me</button>
  </Tooltip>
</template>

Examples

Basic Tooltip with HTML Content

<template>
  <Tooltip content="This is a tooltip <i>with</i> <strong>HTML</strong> content.">
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

This is a tooltip with HTML content.

Custom Tooltip Class and Content slot

<template>
  <Tooltip content="Tooltip with extra tooltip class" tooltip-class="less-opacity-class text-red-500 scale-110">
    <template #content="{ content }">
      <div class="[.less-opacity-class_&]:opacity-50">
        {{ content }}
      </div>
    </template>
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

Tooltip with extra tooltip class

Tooltip Blur Effect

<template>
  <Tooltip content="Tooltip without default backdrop blur effect" :blur="false">
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

Tooltip without default backdrop blur effect

The background of this tooltip is not Blurred.

Toggle blur effect

Tooltip with Max Width

<template>
  <Tooltip :max-width="150" content="<p>This is a tooltip with <strong>maxWidth</strong> of <strong>150</strong>for example.</p>">
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

This is a tooltip with maxWidth of 150for example.

Tooltip Placement

<template>
  <Tooltip content="Tooltip with custom placement" placement="top">
    <ButtonBase label="Hover me"></ButtonBase>
  </Tooltip>
</template>

Tooltip with top Placement

top

right

bottom

left

top-start

right-start

bottom-start

left-start

top-end

right-end

bottom-end

left-end

Customization with Tailwind CSS

To customize the tooltip styles globally, extend your Tailwind configuration. Example:

// tailwind.config.js
export default {
  theme: {
    extend: {
      components: (theme) => ({
        tooltip: {
          // Available variables you can override:
          '--rvc-tooltip-color': theme('colors.white'),
          '--rvc-tooltip-transition-property': 'opacity, visibility',
          '--rvc-tooltip-transition-duration': theme('transitionDuration.DEFAULT'),
          '--rvc-tooltip-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
          '--rvc-tooltip-text-align': 'left',
          '--rvc-tooltip-padding-x': theme('padding.4'),
          '--rvc-tooltip-padding-y': theme('padding.4'),
          '--rvc-tooltip-width': theme('width.max'),
          '--rvc-tooltip-border-radius': theme('borderRadius.DEFAULT'),
          '--rvc-tooltip-bg-color': withAlphaValue(theme('colors.neutral.700'), 0.6),
          '--rvc-tooltip-arrow-size': theme('width.3'),
          '--rvc-tooltip-blur-size': theme('blur.sm'),

          // Additional custom styles
          zIndex: 99,
        },
      }),
    },
  },
};