RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Tooltip

Displays contextual information in a small popup when a user hovers over or focuses a trigger element.

Variants

The tooltip supports light and dark visual styles via the variant prop.

Default

<template>
  <HLTooltip id="tooltip-default">
    <template #trigger>
      <HLButton id="tooltip-default-btn">Open Default Tooltip</HLButton>
    </template>
    <template #header> I am the heading </template>
    I am the content.
  </HLTooltip>
</template>

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

Dark

<template>
  <HLTooltip id="tooltip-dark" variant="dark">
    <template #trigger>
      <HLButton id="tooltip-dark-btn">Open Dark Tooltip</HLButton>
    </template>
    <template #header> I am the heading </template>
    I am the content.
  </HLTooltip>
</template>

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

Placements

Use the placement prop to position the tooltip relative to its trigger. If there isn't enough room on the chosen side, the tooltip automatically flips to a side where it fits.

Vue

<template>
  <HLTooltip id="tooltip-right-end" placement="right-end">
    <template #trigger>
      <HLButton id="tooltip-right-end-btn">right-end</HLButton>
    </template>
    <template #header> I am the heading </template>
    I am the content.
  </HLTooltip>
</template>

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

Trigger

The trigger prop decides what opens the tooltip. hover is the default and the right choice for most hints; click suits touch devices and longer content; focus shows the tooltip only for keyboard users tabbing through. manual disables all three so you can drive visibility yourself — see Controlled Visibility.

<template>
  <HLTooltip id="tooltip-trigger-hover" trigger="hover">
    <template #trigger>
      <HLButton id="tooltip-trigger-hover-btn">hover</HLButton>
    </template>
    Opens when you hover the trigger.
  </HLTooltip>

  <HLTooltip id="tooltip-trigger-click" trigger="click">
    <template #trigger>
      <HLButton id="tooltip-trigger-click-btn">click</HLButton>
    </template>
    Opens on click, and stays until you click away.
  </HLTooltip>

  <HLTooltip id="tooltip-trigger-focus" trigger="focus">
    <template #trigger>
      <HLButton id="tooltip-trigger-focus-btn">focus</HLButton>
    </template>
    Tab to this button to open the tooltip.
  </HLTooltip>
</template>

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

Controlled Visibility

Pass show to control the tooltip yourself, and pair it with trigger="manual" so pointer and focus gestures don't fight your state. The @show event fires whenever the tooltip wants to change visibility — use it to keep your own flag in sync.

Event Log:

No events yet.

<template>
  <HLButton id="tooltip-controlled-toggle" @click="show = !show">{{ show ? 'Hide' : 'Show' }} tooltip</HLButton>

  <!-- trigger="manual" so only `show` decides visibility -->
  <HLTooltip id="tooltip-controlled" trigger="manual" :show="show" @show="handleShow">
    <template #trigger>
      <HLButton id="tooltip-controlled-btn" variant="secondary">Controlled target</HLButton>
    </template>
    Visibility comes from the <code>show</code> prop, not from hovering.
  </HLTooltip>
</template>

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

const show = ref(false)

const handleShow = (value: boolean) => {
  console.log('tooltip visibility changed to', value)
}
</script>

INFO

@show receives the requested visibility as a boolean. It fires for uncontrolled tooltips as well, so you can react to a hover-driven tooltip opening without taking over its state.

Customized Styles

There are three style props, and they target different things:

• header-style and content-style are plain CSS applied to the header and body regions.
• tooltip-style styles the tooltip shell as a whole and accepts a specific set of keys: padding, borderRadius, maxWidth, maxHeight, plus color (background), textColor, and titleColor. Use it to resize or recolour the whole tooltip rather than one region.

<template>
  <!-- Per-region CSS -->
  <HLTooltip id="tooltip-customization" :header-style="{ backgroundColor: 'lightgray' }" :content-style="{ backgroundColor: 'lightgreen' }">
    <template #trigger>
      <HLButton id="tooltip-customization-btn">Region styles</HLButton>
    </template>
    <template #header> I am the heading </template>
    I am the content.
  </HLTooltip>

  <!-- Whole-shell sizing and colours -->
  <HLTooltip
    id="tooltip-shell-style"
    :tooltip-style="{
      maxWidth: '220px',
      padding: '16px',
      borderRadius: '12px',
      color: 'var(--blue-50)',
      textColor: 'var(--blue-900)',
      titleColor: 'var(--blue-900)',
    }"
  >
    <template #trigger>
      <HLButton id="tooltip-shell-style-btn">Shell style</HLButton>
    </template>
    <template #header> I am the heading </template>
    A narrower tooltip with extra padding, rounded corners, and a blue palette.
  </HLTooltip>
</template>

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

INFO

tooltip-style is not general-purpose CSS — only the keys listed above take effect, and color sets the background rather than the text colour (use textColor for that). For anything outside that set, reach for content-style or header-style.

Disabled

When the tooltip is disabled, it will not be shown.

Vue

<template>
  <HLTooltip id="tooltip-disabled" :disabled="true">
    <template #trigger>
      <HLButton id="tooltip-disabled-btn">Disabled Tooltip</HLButton>
    </template>
    I am the content.
  </HLTooltip>
</template>

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

Mount Target

By default the tooltip mounts to body, which keeps it above surrounding content but detaches it from the trigger's scroll container. If the trigger sits inside a scrollable area, scrolling leaves the tooltip behind at its original position. Point to at an element inside that container — or pass :to="false" to keep the tooltip exactly where the component sits — and the two move together.

Open a tooltip, then scroll this box.

Bottom of the scroll area.

<template>
  <div id="tooltip-scroll-area" style="position: relative; height: 200px; overflow: auto;">
    <!-- Default: mounted to body, so it detaches while scrolling -->
    <HLTooltip id="tooltip-to-body" trigger="click">
      <template #trigger>
        <HLButton id="tooltip-to-body-btn">Mounts to body</HLButton>
      </template>
      Scroll — this tooltip stays behind.
    </HLTooltip>

    <!-- Rendered in place, so trigger and tooltip move together -->
    <HLTooltip id="tooltip-to-scoped" trigger="click" :to="false">
      <template #trigger>
        <HLButton id="tooltip-to-scoped-btn" variant="secondary">to: false</HLButton>
      </template>
      Scroll — this tooltip follows.
    </HLTooltip>
  </div>
</template>

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

INFO

to accepts a CSS selector, an element, or false. A selector target must already exist when the tooltip mounts, and should have position: relative so the tooltip positions against it. This is the same fix documented for overlays inside a drawer or a modal.

Accessibility

• Reference the tooltip id from the trigger via aria-describedby so the hint is announced when it appears.
• Toggle aria-expanded (or data-state) on the trigger as you show/hide the tooltip to keep assistive tech in sync.
• Keep tooltip text concise and focused on the control’s purpose since it is read verbatim.

Imports

import { HLTooltip } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string	undefined	The id of the tooltip element
trigger	'click' | 'hover' | 'focus' | 'manual'	'hover'	The event that triggers the tooltip. Ignored when show is provided (controlled mode)
placement	'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end'	undefined	The position of the tooltip relative to the target
show	boolean	undefined	Controls the visibility of the tooltip. When set, the tooltip is controlled — drive it yourself and sync via the @show event instead of relying on trigger
variant	'light' | 'dark'	'dark'	The visual style of the tooltip. Any other value falls back to 'dark'.
headerStyle	object	{}	Custom styles for the tooltip header
contentStyle	object	{}	Custom styles for the tooltip content
tooltipStyle	object	{}	Styles for the tooltip shell. Recognised keys: padding, borderRadius, maxWidth, maxHeight, color (background), textColor, titleColor
disabled	boolean	undefined	Whether the tooltip is disabled
to	string | HTMLElement | false | undefined	'body'	The element to which the tooltip should be appended. Can be a CSS selector string, HTMLElement, false to disable portal, or undefined for default behavior

Emits

Name	Parameters	Trigger
@show	(value: boolean) => void	on show status changes

Slots

Name	Parameters	Description
default	()	The content inside the tooltip
trigger	()	The element or component that triggers the tooltip
header	()	The header content of the tooltip