Migrating from ghl-ui Tooltip to HighRise Tooltip

This guide will help you migrate from the ghl-ui Tooltip component to the new HighRise Tooltip component. The Tooltip component has been completely redesigned with enhanced accessibility, improved styling options, and better integration with the HighRise design system.

Component Implementation Changes

Import Changes

- import { UITooltip } from '@gohighlevel/ghl-ui'
+ import { HLTooltip } from '@platform-ui/highrise'

Basic Usage Changes

Basic Tooltip

- <UITooltip>
-   <template #trigger>
-     <UIButton>Hover Me</UIButton>
-   </template>
-   This is a tooltip
- </UITooltip>

+ <HLTooltip id="basic-tooltip" variant="dark">
+   <template #trigger>
+     <HLButton id="hover-btn">Hover Me</HLButton>
+   </template>
+   This is a tooltip
+ </HLTooltip>

With Header

- <UITooltip>
-   <template #trigger>
-     <UIButton>With Header</UIButton>
-   </template>
-   <div class="font-bold mb-2">Tooltip Title</div>
-   This is the content
- </UITooltip>

+ <HLTooltip id="header-tooltip" variant="dark">
+   <template #trigger>
+     <HLButton id="header-btn">With Header</HLButton>
+   </template>
+   <template #header>Tooltip Title</template>
+   This is the content
+ </HLTooltip>

Light Variant

- <UITooltip>
-   <template #trigger>
-     <UIButton>Dark Theme</UIButton>
-   </template>
-   <div class="bg-gray-800 text-white p-2">Dark tooltip</div>
- </UITooltip>

+ <HLTooltip id="dark-tooltip" variant="light">
+   <template #trigger>
+     <HLButton id="dark-btn">Dark Theme</HLButton>
+   </template>
+   Dark tooltip
+ </HLTooltip>

Custom Placement

- <UITooltip placement="top-start">
-   <template #trigger>
-     <UIButton>Custom Placement</UIButton>
-   </template>
-   Tooltip content
- </UITooltip>

+ <HLTooltip id="placement-tooltip" placement="top-start">
+   <template #trigger>
+     <HLButton id="placement-btn">Custom Placement</HLButton>
+   </template>
+   Tooltip content
+ </HLTooltip>

Props Changes

Required Props

ghl-ui Prop	HighRise Prop	Notes
-	id	New required prop for accessibility

Modified Props

ghl-ui Prop	HighRise Prop	Notes
trigger	trigger	Same options: 'hover', 'click', 'focus', 'manual'
placement	placement	Same placement options with improved positioning logic
show	show	Same functionality for controlling visibility

New Props

Prop	Type	Default	Description
variant	'light' | 'dark'	'light'	Visual style of the tooltip
headerStyle	object	{}	Custom styles for tooltip header
contentStyle	object	{}	Custom styles for tooltip content
tooltipStyle	object	{}	Custom styles for entire tooltip

Events Changes

ghl-ui Event	HighRise Event	Notes
show	show	Same event with improved type safety (value: boolean)

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
default	default	Main content of the tooltip
trigger	trigger	Element that triggers the tooltip
-	header	New: Dedicated slot for tooltip header content

Examples

Basic Tooltip with Header

<template>
  <HLTooltip id="example-tooltip">
    <template #trigger>
      <HLButton id="example-btn">Hover Me</HLButton>
    </template>
    <template #header>Important Info</template>
    This is a tooltip with a header
  </HLTooltip>
</template>

<script setup>
import { HLTooltip, HLButton } from '@platform-ui/highrise'
</script>

Custom Styled Dark Tooltip

<template>
  <HLTooltip id="styled-tooltip" variant="dark" :header-style="{ padding: '12px' }" :content-style="{ backgroundColor: '#1a1a1a' }">
    <template #trigger>
      <HLButton id="styled-btn">Custom Styled</HLButton>
    </template>
    <template #header>Custom Header</template>
    Styled tooltip content
  </HLTooltip>
</template>

Click Triggered Tooltip

<template>
  <HLTooltip id="click-tooltip" trigger="click">
    <template #trigger>
      <HLButton id="click-btn">Click Me</HLButton>
    </template>
    This tooltip appears on click
  </HLTooltip>
</template>

Manual Control with Events

<template>
  <div>
    <HLButton @click="toggleTooltip">Toggle Tooltip</HLButton>

    <HLTooltip id="manual-tooltip" trigger="manual" :show="isVisible" @show="handleShowChange">
      <template #trigger>
        <div class="w-32 h-32 bg-gray-200 flex items-center justify-center">Target Element</div>
      </template>
      Manually controlled tooltip
    </HLTooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HLTooltip, HLButton } from '@platform-ui/highrise'

const isVisible = ref(false)

const toggleTooltip = () => {
  isVisible.value = !isVisible.value
}

const handleShowChange = value => {
  isVisible.value = value
}
</script>

Breaking Changes

1. Required ID

   • New required id prop for accessibility
   • Must be unique within the page

2. Header Implementation

   • New dedicated header slot
   • Replaces custom header div implementation

3. Styling System

   • New variant system ('light'/'dark')
   • Separate style props for header/content
   • CSS variables naming changes

4. Event Handling

   • Stricter type checking for events
   • Improved event payload consistency

5. Default Styles

   • New default styling system
   • Different padding and spacing
   • Updated typography integration
   • the ghl-ui tooltip had a default variant of dark, the new tooltip has a default variant of light

Best Practices

1. Always provide unique id props
2. Use appropriate trigger for context
3. Consider mobile interactions
4. Keep content concise
5. Use headers for complex tooltips
6. Test different screen sizes
7. Handle events properly
8. Follow accessibility guidelines
9. Choose appropriate placement
10. Use variants consistently