AppTooltip (Vue Component)

Tooltips are small, interactive, textual hints for mainly graphical elements. When used correctly, they can provide a useful and unobtrusive extra layer of information.

• Styling based on: CSS Tooltip
• Design: Figma Component

Best practices for tooltips

• Keep the content short and concise and avoid using tooltips for critical information or actions
• Use tooltips for icons, buttons, or other elements that might not be immediately clear to the user
• Make sure the trigger element is large enough to be easily hoverable or tabbable

Overview

INFO

AppTooltip is a typed Vue wrapper around the CSS tooltip system, see Tooltips. It wraps any trigger element and renders a .c-tooltip sibling, wiring up aria-describedby automatically. All positioning, variant, and size modifiers are available as props.

Quick Start

Import

import { AppTooltip } from '@pharma4u/patternlab/vue'

Basic Usage

<AppTooltip content="Angaben prüfen">
  <button type="button" class="fa fa-exclamation-circle h-color-warning h-type-base h-help-pointer h-block h-focus-visible h-border-radius" aria-label="Angaben prüfen"></button>
</AppTooltip>

Live Examples

Variants

Rich HTML content via #content slot + large size

Icon button trigger (btn prop) opening left

Show Code

<script setup>
import { AppTooltip } from '@pharma4u/patternlab/vue';
</script>

<!-- Simple text -->
<AppTooltip content="Default tooltip">
  <button class="c-btn -small -inverted">Hover me</button>
</AppTooltip>

<!-- Position + variant -->
<AppTooltip content="Warning!" position="top" variant="warning">
  <button class="c-btn -icon-btn -small -white">
    <i class="fa fa-exclamation-triangle h-color-warning"></i>
  </button>
</AppTooltip>

<!-- Rich HTML via slot -->
<AppTooltip size="large">
  <button class="c-btn -small -primary-outline -icon-left">
    <i class="far fa-info-circle"></i> More Info
  </button>
  <template #content>
    <strong>Fit fürs Examen</strong> – Karteikartentrainer mit über 1500 Fragen.
  </template>
</AppTooltip>

<!-- Icon button, opens left -->
<AppTooltip content="Delete" position="left" :btn="true">
  <button class="c-btn -icon-btn -small -inverted" aria-label="Delete">
    <i class="fa fa-trash"></i>
  </button>
</AppTooltip>

Props

Prop	Type	Default	Description
content	string	""	Tooltip text. Overridden by #content slot when provided.
position	'default' | 'left' | 'top' | 'top-left' | 'center' | 'top-center'	'default'	Direction the tooltip opens from the trigger.
variant	'default' | 'success' | 'warning' | 'error'	'default'	Color scheme of the tooltip bubble.
size	'default' | 'large' | 'extra-large'	'default'	Min-width and padding of the tooltip bubble.
visible	boolean	false	Forces the tooltip to always be visible (-is-visible).
btn	boolean	false	Applies -btn margin correction for icon-button triggers.

Slots

Slot	Description
default	The trigger element (button, link, icon…).
content	Rich HTML tooltip body. Use instead of content prop when markup is needed.