README

This README would normally document whatever steps are necessary to get your application up and running.

What is this repository for?

• Quick summary
• Version
• Learn Markdown

How do I get set up?

• Summary of set up
• Configuration
• Dependencies
• Database configuration
• How to run tests
• Deployment instructions

Contribution guidelines

• Writing tests
• Code review
• Other guidelines

Who do I talk to?

• Repo owner or admin
• Other community or team contact

ViTooltip

A flexible and customizable tooltip component for Vue 3 using @floating-ui/vue. Supports multiple trigger types, optional text truncation, automatic placement, and dynamic theming.

📦 Usage

<vi-tooltip
  text="This is a tooltip"
  trigger="hover"
  position="top"
  :truncate="30"
  :show-only-if-overflowed="true"
  color="primary"
  custom-color="#4A90E2"
  text-custom-color="#fff"
>
  <template #text="{ text }">
    <span>{{ text }}</span>
  </template>
</vi-tooltip>

⚙️ Props

| Prop | Type | Default | Description | | ---------------------- | ------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- | | text | String | — | The text to display inside the tooltip. | | trigger | String | 'hover' | The interaction that triggers the tooltip: 'hover', 'click', or 'focus'. | | position | String | 'bottom' | Tooltip position. Options: 'top', 'top-start', 'right-end', etc. | | showOnlyIfOverflowed | Boolean | false | Shows the tooltip only if text is truncated. | | truncate | Number | — | Max characters to show before appending ellipsis (…). | | color | String | 'primary' | Predefined tooltip background color. Options: 'primary', 'primary-light', 'secondary', 'secondary-light', 'neutral'. | | customColor | String | — | Override background color with custom value (e.g. #4A90E2). | | textCustomColor | String | — | Custom text color inside the tooltip. |

🔌 Slots

| Name | Scope Props | Description | | ------------------ | ----------- | -------------------------------------------------------------------------- | | default / text | { text } | Slot for displaying the (truncated) visible content. | | content | — | Optional slot for fully custom tooltip content. Overrides the text prop. |