Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Tooltip

Tooltip component

Variants

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>
  import { HLTooltip } 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>
  import { HLTooltip } from '@platform-ui/highrise'
</script>

Placements

When there is no space to show the tooltip in desired placement, then the tooltip will be shown other side where there is space.

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>
  import { HLTooltip, HLButton } from '@platform-ui/highrise'
</script>

Customized Styles

Vue

<template>
  <HLTooltip id="tooltip-customization" :header-style="{ backgroundColor: 'lightgray' }" :content-style="{ backgroundColor: 'lightgreen' }">
    <template #trigger>
      <HLButton id="tooltip-customization-btn">Open Customized Tooltip</HLButton>
    </template>
    <template #header> I am the heading </template>
    I am the content.
  </HLTooltip>
</template>
<script setup>
  import { HLTooltip, HLButton } from '@platform-ui/highrise'
</script>

Disabled

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

Vue

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

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' as PopoverTrigger	'hover'	The event that triggers the tooltip
placement	'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' as Placement	undefined	The position of the tooltip relative to the target
show	boolean	undefined	Controls the visibility of the tooltip
variant	'light' | 'dark'	'light'	The visual style of the tooltip
headerStyle	object	{}	Custom styles for the tooltip header
contentStyle	object	{}	Custom styles for the tooltip content
tooltipStyle	object	{}	Custom styles for the tooltip
disabled	boolean	undefined	Whether the tooltip is disabled

Emits

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

Slots

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