Component specification

Displays contextual information when users hover over, focus on, or tap an element. Tooltips help users understand the purpose or state of UI elements without cluttering the interface.

• Component Name: N8nTooltip
• Figma Component: Figma
• Reka UI Component: Tooltip
• Nuxt UI Component: Tooltip

Public API Definition

Props

• content?: string - Text content for the tooltip. Supports HTML (sanitized for security).
• placement?: Placement - Position of tooltip relative to trigger. Values: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'. Default: 'top'
• disabled?: boolean - When true, prevents the tooltip from showing.
• showAfter?: number - Delay in milliseconds before showing tooltip after trigger is hovered. Default: 0
• visible?: boolean - Manual control of tooltip visibility (programmatic show/hide).
• enterable?: boolean - Whether the mouse can enter the tooltip content area. Default: true
• teleported?: boolean - Whether to append the tooltip to the body. Default: true
• offset?: number - Offset of the tooltip from the trigger element (in pixels). Default: 6
• buttons?: IN8nButton[] - Array of action buttons to render below tooltip content.
• justifyButtons?: Justify - Flex justify-content for buttons container. Default: 'flex-end'
• avoidCollisions?: boolean - Whether to avoid collisions with viewport boundaries (flip/shift). Default: true
• contentClass?: string - Additional CSS class for the tooltip content.

Slots

• default - The trigger element that activates the tooltip (required).
• content - Custom content for the tooltip body. When not provided, renders content prop with HTML sanitization.

Template usage example

Simple text tooltip:

<script setup lang="ts">

</script>

<template>
  
    
  
</template>

Custom content slot:

<script setup lang="ts">

</script>

<template>
  
    <template #content>
      <div class="custom-tooltip-content">
        <strong>Advanced Feature</strong>
        <p>This feature requires a pro plan.</p>
      </div>
    </template>
    
  
</template>

Delayed tooltip:

<script setup lang="ts">

</script>

<template>
  
    <span>Hover and wait...</span>
  
</template>

Programmatically controlled visibility:

<script setup lang="ts">

const isVisible = ref(false)

const showTooltip = () => {
  isVisible.value = true
  setTimeout(() => {
    isVisible.value = false
  }, 2000)
}
</script>

<template>
  
    <button @click="showTooltip">
      Click to show tooltip for 2 seconds
    </button>
  
</template>

Disabled tooltip:

<script setup lang="ts">

const showTooltip = ref(false)
</script>

<template>
  
    <span>{{ showTooltip ? 'Tooltip enabled' : 'Tooltip disabled' }}</span>
  
</template>

Tooltip with buttons:

<script setup lang="ts">

const handleAction = () => {
  console.log('Action clicked!')
}

const buttons = [
  {
    attrs: { label: 'Learn more', type: 'secondary', size: 'mini' },
    listeners: { onClick: handleAction },
  },
]
</script>

<template>
  
    <span>Hover for more info</span>
  
</template>

Tooltip with custom class:

<script setup lang="ts">

</script>

<template>
  
    <span>Hover me</span>
  
</template>

<style>
.my-custom-tooltip {
  max-width: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>

Tooltip without collision avoidance:

<script setup lang="ts">

</script>

<template>
  
    <span>Hover me</span>
  
</template>