Tooltip | Virgo

Default Classes

import type { ComponentClasses } from '@/plugin'
import type { tooltipProps } from '@/components/tooltip/meta'

export const tooltipClasses: ComponentClasses<tooltipProps> = {
		wrapper: 'z-[54]',
		content: 'bg-[hsl(var(--virgo-tooltip-bg-color))] px-2 py-1 rounded-lg',
		contentText: 'text-sm text-white text-center'
}

export type tooltipClassesValidKeys = keyof typeof tooltipClasses

import type { ComponentClasses } from '@/plugin'
import type { tooltipProps } from '@/components/tooltip/meta'

export const tooltipClasses: ComponentClasses<tooltipProps> = {
		wrapper: 'z-[54]',
		content: 'bg-[hsl(var(--virgo-tooltip-bg-color))] px-2 py-1 rounded-lg',
		contentText: 'text-sm text-white text-center'
}

export type tooltipClassesValidKeys = keyof typeof tooltipClasses

Basic

Use tooltip component's text prop to show passed text in tooltip.

You can also use default slot to render custom content.

<template>
	<div class="flex flex-wrap gap-4">
		<virgo-button>
			<tooltip text="Hello!" />
			Hover Over Me
		</virgo-button>
		<virgo-button>
			<!-- ℹ️ You can also customize `--virgo-tooltip-bg-c` CSS var for changing tooltip background -->
			<tooltip :style="{'--virgo-tooltip-bg-color': '8,60%,50%'}">
				<span class="text-sm text-center text-red-100">
					<i class="i-bx-shield-x me-1" />
					<span>Protection is disabled</span>
				</span>
			</tooltip>
			Scan Skipped
		</virgo-button>
	</div>
</template>

<template>
	<div class="flex flex-wrap gap-4">
		<virgo-button>
			<tooltip text="Hello!" />
			Hover Over Me
		</virgo-button>
		<virgo-button>
			<!-- ℹ️ You can also customize `--virgo-tooltip-bg-c` CSS var for changing tooltip background -->
			<tooltip :style="{'--virgo-tooltip-bg-color': '8,60%,50%'}">
				<span class="text-sm text-center text-red-100">
					<i class="i-bx-shield-x me-1" />
					<span>Protection is disabled</span>
				</span>
			</tooltip>
			Scan Skipped
		</virgo-button>
	</div>
</template>

TIP

While rendering custom content, You can use .virgo-tooltip-text class to add default styles of tooltip text.

Trigger

To open menu on click use set trigger prop to click.

<template>
	<virgo-button>
		<tooltip
			trigger="click"
			text="Cotton candy"
		/>

		Click Me
	</virgo-button>
</template>

<template>
	<virgo-button>
		<tooltip
			trigger="click"
			text="Cotton candy"
		/>

		Click Me
	</virgo-button>
</template>

v-model support

tooltip also support v-model to show/hide tooltip.

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

	const isTooltipVisible = ref(false)
</script>

<template>
	<div class="flex flex-wrap gap-12">
		<virgo-button>
			<tooltip
				v-model="isTooltipVisible"
				text="Cotton candy"
			/>

			Button
		</virgo-button>

		<div class="flex flex-wrap gap-4">
			<virgo-button
				:disabled="isTooltipVisible"
				@click="isTooltipVisible = true"
			>
				Show tooltip
			</virgo-button>
			<virgo-button
				:disabled="!isTooltipVisible"
				@click="isTooltipVisible = false"
			>
				Hide tooltip
			</virgo-button>
		</div>
	</div>
</template>

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

	const isTooltipVisible = ref(false)
</script>

<template>
	<div class="flex flex-wrap gap-12">
		<virgo-button>
			<tooltip
				v-model="isTooltipVisible"
				text="Cotton candy"
			/>

			Button
		</virgo-button>

		<div class="flex flex-wrap gap-4">
			<virgo-button
				:disabled="isTooltipVisible"
				@click="isTooltipVisible = true"
			>
				Show tooltip
			</virgo-button>
			<virgo-button
				:disabled="!isTooltipVisible"
				@click="isTooltipVisible = false"
			>
				Hide tooltip
			</virgo-button>
		</div>
	</div>
</template>

Delay

You can delay showing and hiding of tooltip by setting delay (show delay) and hideDelay props.

<template>
	<virgo-button>
		<tooltip
			text="Cotton candy"
			:delay="1000"
			:hide-delay="500"
		/>
		Button
	</virgo-button>
</template>

<template>
	<virgo-button>
		<tooltip
			text="Cotton candy"
			:delay="1000"
			:hide-delay="500"
		/>
		Button
	</virgo-button>
</template>

delay - DX focused prop name

As we regularly configure delay for showing tooltip only and not for hiding, we named prop for delaying tooltip delay instead of showDelay.

Transition

tooltip also support transition. Default transition is slide-y. Set it to available transition to use different transition. e.g. transition="fade".

To disable the transition you can set transition prop to null.

<template>
	<virgo-button>
		<tooltip
			transition="fade"
			text="Cotton candy"
		/>
		Button
	</virgo-button>
</template>

<template>
	<virgo-button>
		<tooltip
			transition="fade"
			text="Cotton candy"
		/>
		Button
	</virgo-button>
</template>

Placement

As tooltip uses Floating UI, you can configure how tooltip is rendered.

To adjust the placement of tooltip, use placement prop. This will get directly passed to Floating UI as show in their docs.

<script lang="ts" setup>
import type { Placement } from '@floating-ui/vue'
import { ref } from 'vue'
const placementOptions: Placement[] = [
  'top',
  'top-start',
  'top-end',
  'right',
  'right-start',
  'right-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'left',
  'left-start',
  'left-end',
]

const tooltipPlacement = ref<Placement>('top')
</script>

<template>
	<div class="flex items-center justify-between flex-wrap gap-4 w-full">
		<virgo-button>
			<tooltip
				:model-value="true"
				:placement="tooltipPlacement"
				text="Cotton candy"
			/>
			Button
		</virgo-button>
		<select
			v-model="tooltipPlacement"
			class="w-24 grow-0 ms-auto"
		>
			<option
				v-for="option in placementOptions"
				:value="option"
			>
				{{ option }}
			</option>
		</select>
	</div>
</template>

<script lang="ts" setup>
import type { Placement } from '@floating-ui/vue'
import { ref } from 'vue'
const placementOptions: Placement[] = [
  'top',
  'top-start',
  'top-end',
  'right',
  'right-start',
  'right-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'left',
  'left-start',
  'left-end',
]

const tooltipPlacement = ref<Placement>('top')
</script>

<template>
	<div class="flex items-center justify-between flex-wrap gap-4 w-full">
		<virgo-button>
			<tooltip
				:model-value="true"
				:placement="tooltipPlacement"
				text="Cotton candy"
			/>
			Button
		</virgo-button>
		<select
			v-model="tooltipPlacement"
			class="w-24 grow-0 ms-auto"
		>
			<option
				v-for="option in placementOptions"
				:value="option"
			>
				{{ option }}
			</option>
		</select>
	</div>
</template>

✨ Auto Placement

If there's not enough space to render the tooltip on given position then it will update the position according to available space.

Strategy

Set which positioning strategy to use to render the tooltip. This is also Floating UI option, for more details please read the official docs here.

<template>
	<virgo-button>
		<tooltip
			text="Cotton candy"
			strategy="fixed"
		/>

		Open Fixed Tooltip
	</virgo-button>
</template>

<template>
	<virgo-button>
		<tooltip
			text="Cotton candy"
			strategy="fixed"
		/>

		Open Fixed Tooltip
	</virgo-button>
</template>

Middleware

tooltip has some middleware as default to render the tooltip content correctly. You can also customize the middleware you want.

In below demo we are not using any middleware so tooltip component won't behave like above tooltip contents. e.g. Flipping tooltip content if there's not enough space won't work.

middleware prop accepts function that must return array of middleware. Please refer to the code snippet of this demo for function signature.

You can read more about middleware on their official docs.

<script lang="ts" setup>
import type { FloatingMiddlewareFunc } from '@virgo-ui/vue'

const middleware: FloatingMiddlewareFunc = (referenceEl, floatingEl) => {
  // console.log('referenceEl :>> ', referenceEl)
  // console.log('floatingEl :>> ', floatingEl)

  // We aren't adding any middleware
  return []
}
</script>

<template>
	<virgo-button>
		<tooltip
			:middleware="middleware"
			text="Cotton candy"
		/>
		Button
	</virgo-button>
</template>

<script lang="ts" setup>
import type { FloatingMiddlewareFunc } from '@virgo-ui/vue'

const middleware: FloatingMiddlewareFunc = (referenceEl, floatingEl) => {
  // console.log('referenceEl :>> ', referenceEl)
  // console.log('floatingEl :>> ', floatingEl)

  // We aren't adding any middleware
  return []
}
</script>

<template>
	<virgo-button>
		<tooltip
			:middleware="middleware"
			text="Cotton candy"
		/>
		Button
	</virgo-button>
</template>

API

Tooltip

variant : RawVariant<Record<string, any>>

Useful when used in the component config classes option, to style it conditionally. Can be a string, object, or an array of string or/and object.

bare : boolean

Disable class inheritance from the Virgo plugin classes config. Only for this component.

modelValue : boolean

Show/Hide floating element base on v-model value

persist : boolean | "content"

Persistence of floating element when clicked outside of reference element

trigger : "click" | "hover"

delay : number

Delay before showing floating element

hideDelay : number

Delay before hiding floating element

Transition to add while showing/hiding floating element

placement : Placement

strategy : Strategy

Strategy option from Floating UI

middleware : FloatingMiddlewareFunc

text : string

Text to render in tooltip

Tooltip NEW ​

Default Classes ​

Basic ​

Trigger ​

v-model support ​

Delay ​

Transition ​

Placement ​

Strategy ​

Middleware ​

API ​

Tooltip NEW