Tooltip Component Demo

This page demonstrates the Tooltip component with various configurations and examples.

Basic Tooltip

A simple tooltip with default settings (hover trigger, top position).

<template>
  <OTooltip content="This is a basic tooltip">
    <button>Hover me</button>
  </OTooltip>
</template>

<script setup>
import { OTooltip } from 'your-component-library'
</script>

Different Positions

Tooltips can be positioned in 8 different ways relative to the trigger element.

Top Position (Default)

Bottom Position

Left Position

Right Position

Corner Positions

<template>
  <div class="position-examples">
    <OTooltip content="Tooltip on top" position="top">
      <button>Top</button>
    </OTooltip>
    
    <OTooltip content="Tooltip on bottom" position="bottom">
      <button>Bottom</button>
    </OTooltip>
    
    <OTooltip content="Tooltip on left" position="left">
      <button>Left</button>
    </OTooltip>
    
    <OTooltip content="Tooltip on right" position="right">
      <button>Right</button>
    </OTooltip>
  </div>
</template>

Different Triggers

Tooltips can be triggered in different ways.

Hover Trigger (Default)

Click Trigger

Focus Trigger

<template>
  <!-- Hover trigger -->
  <OTooltip content="Hover to see this tooltip" trigger="hover">
    <button>Hover Me</button>
  </OTooltip>
  
  <!-- Click trigger -->
  <OTooltip content="Click to toggle this tooltip" trigger="click">
    <button>Click Me</button>
  </OTooltip>
  
  <!-- Focus trigger -->
  <OTooltip content="Focus to see this tooltip" trigger="focus">
    <input type="text" placeholder="Focus me" />
  </OTooltip>
</template>

Custom Delays

You can customize the show and hide delays for better user experience.

Fast Tooltip (No Delay)

Slow Tooltip (Long Delay)

<template>
  <!-- Fast tooltip -->
  <OTooltip content="Appears instantly" :delay="0" :hideDelay="0">
    <button>Fast</button>
  </OTooltip>
  
  <!-- Slow tooltip -->
  <OTooltip content="Takes time to appear" :delay="1000" :hideDelay="500">
    <button>Slow</button>
  </OTooltip>
</template>

Theme Variants

Tooltips come with built-in theme variants for different use cases.

Light Theme

Success Theme

Error Theme

Warning Theme

<template>
  <div class="theme-examples">
    <OTooltip content="Light theme tooltip" customClass="tooltip-light">
      <button>Light</button>
    </OTooltip>
    
    <OTooltip content="Success message" customClass="tooltip-success">
      <button>Success</button>
    </OTooltip>
    
    <OTooltip content="Error message" customClass="tooltip-error">
      <button>Error</button>
    </OTooltip>
    
    <OTooltip content="Warning message" customClass="tooltip-warning">
      <button>Warning</button>
    </OTooltip>
  </div>
</template>

Without Arrow

Tooltips can be displayed without the arrow indicator.

<template>
  <OTooltip content="No arrow tooltip" :showArrow="false">
    <button>No Arrow</button>
  </OTooltip>
</template>

Custom Content

You can use slots to provide custom HTML content instead of plain text.

<template>
  <OTooltip position="top">
    <button>Custom Content</button>
    <template #tooltip>
      <div class="custom-tooltip">
        <h4>Custom Title</h4>
        <p>This tooltip has custom HTML content with multiple elements.</p>
        <button @click="handleCustomAction" class="custom-action-btn">
          Action Button
        </button>
      </div>
    </template>
  </OTooltip>
</template>

<script setup>
import { OTooltip } from 'your-component-library'

const handleCustomAction = () => {
  console.log('Custom action clicked!')
}
</script>

<style>
.custom-tooltip {
  text-align: center;
}

.custom-tooltip h4 {
  margin: 0 0 8px 0;
  color: white;
}

.custom-tooltip p {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.9);
}

.custom-action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.custom-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>

Programmatic Control

You can control tooltips programmatically using refs and exposed methods.

<template>
  <OTooltip 
    ref="tooltipRef"
    content="Programmatically controlled tooltip"
    trigger="click"
  >
    <button>Programmatic</button>
  </OTooltip>
  
  <div class="control-buttons">
    <button @click="showTooltip">Show</button>
    <button @click="hideTooltip">Hide</button>
    <button @click="toggleTooltip">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { OTooltip } from 'your-component-library'

const tooltipRef = ref(null)

const showTooltip = () => {
  tooltipRef.value?.show()
}

const hideTooltip = () => {
  tooltipRef.value?.hide()
}

const toggleTooltip = () => {
  tooltipRef.value?.toggle()
}
</script>

Event Handling

Tooltips emit events that you can listen to for custom behavior.

Show events:

Hide events:

Toggle events:

<template>
  <OTooltip 
    content="This tooltip emits events"
    @show="handleShow"
    @hide="handleHide"
    @toggle="handleToggle"
  >
    <button>Events</button>
  </OTooltip>
  
  <div class="event-log">
    <p><strong>Show events:</strong> {{ showEvents }}</p>
    <p><strong>Hide events:</strong> {{ hideEvents }}</p>
    <p><strong>Toggle events:</strong> {{ toggleEvents }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { OTooltip } from 'your-component-library'

const showEvents = ref(0)
const hideEvents = ref(0)
const toggleEvents = ref(0)

const handleShow = () => {
  showEvents.value++
}

const handleHide = () => {
  hideEvents.value++
}

const handleToggle = (isVisible) => {
  toggleEvents.value++
  console.log('Tooltip toggled:', isVisible)
}
</script>

Form Integration

Tooltips work well with form elements for validation messages and help text.

Email Address

Password

Help Icon

?

<template>
  <div class="form-example">
    <div class="form-group">
      <label>Email Address</label>
      <OTooltip 
        content="Please enter a valid email address"
        trigger="focus"
        position="bottom"
        customClass="tooltip-error"
      >
        <input type="email" placeholder="Enter your email" />
      </OTooltip>
    </div>
    
    <div class="form-group">
      <label>Password</label>
      <OTooltip 
        content="Password must be at least 8 characters long"
        trigger="focus"
        position="bottom"
        customClass="tooltip-warning"
      >
        <input type="password" placeholder="Enter your password" />
      </OTooltip>
    </div>
  </div>
</template>