Tooltip

Source

<script setup lang="ts">
import MtTooltip from "@shopware-ag/meteor-component-library/MtTooltip";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-tooltip content="Tooltip content">
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Open tooltip</mt-button>
    </template>
  </mt-tooltip>
</template>

Usage

Tooltip is a floating layer of brief supporting information shown when users hover or focus a trigger element. Use it for short contextual guidance when extra information is helpful but should stay hidden until requested, and when the trigger is already part of the interface, such as a button, icon, or inline control.

import { MtTooltip } from "@shopware-ag/meteor-component-library";

Examples

Placement

Use placement to position the tooltip relative to its trigger.

<script setup lang="ts">
import MtTooltip from "@shopware-ag/meteor-component-library/MtTooltip";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-tooltip content="Tooltip content" placement="top">
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Top</mt-button>
    </template>
  </mt-tooltip>

  <mt-tooltip content="Tooltip content" placement="right">
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Right</mt-button>
    </template>
  </mt-tooltip>

  <mt-tooltip content="Tooltip content" placement="bottom">
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Bottom</mt-button>
    </template>
  </mt-tooltip>

  <mt-tooltip content="Tooltip content" placement="left">
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Left</mt-button>
    </template>
  </mt-tooltip>
</template>

Rich content

The content prop accepts sanitized HTML, so simple formatting can be shown when needed.

<script setup lang="ts">
import MtTooltip from "@shopware-ag/meteor-component-library/MtTooltip";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-tooltip
    content="<strong>Tooltip title: </strong>Use short supporting details."
    :max-width="240"
  >
    <template #default="params">
      <mt-button variant="secondary" v-bind="params">Open tooltip</mt-button>
    </template>
  </mt-tooltip>
</template>

Anatomy

Tooltip uses the default slot as the trigger.
The slot provides trigger bindings such as focus, hover, and accessibility attributes that should be spread onto the trigger element.
The tooltip body itself is rendered in a floating layer and positioned relative to the trigger.

API reference

Props

Prop	Type	Default
`content` *	`string`
`delay-duration-in-ms`	`number`	`300`
`hide-delay-duration-in-ms`	`number`	`300`
`placement`	`Placement`	`"top"`
`max-width`	`number`	`240`

Slots

Slot	Bindings
`default`	`{ id: string; onFocus: () => void; onBlur: (event: FocusEvent) => void; onKeydown: (event: KeyboardEvent) => void; onMouseover: () => void; onMouseleave: () => void; onMousedown: () => void; onMouseup: () => void; 'aria-describedby': string; }`

Best practices

Keep tooltip content brief and easy to scan.
Attach the tooltip to the element it explains.
Use placement and maxWidth when the surrounding layout needs a more predictable presentation.

Don't

Do not use Tooltip for critical information users must always see.
Do not put long-form instructions or complex content in the tooltip.
Do not rely on Tooltip as the only way to explain a control that would otherwise be unclear.

Behavior

Tooltip opens on hover and keyboard focus, and closes on blur, mouse leave, or common dismiss keys such as Escape.
The content prop accepts sanitized HTML, so simple formatting can be shown when needed.
delayDurationInMs, hideDelayDurationInMs, placement, and maxWidth help tune the tooltip behavior for the surrounding UI.

Accessibility

Only use Tooltip for supporting information, not for instructions users must read to complete a task.
Make sure the trigger control still has a clear accessible name and purpose without opening the tooltip.
Keep the content short enough that it can be understood quickly when focus moves to the trigger.

Help Text: when you need the standard small help icon pattern next to a field or label.

Edit this pageorReport an issue

Toast

Short-lived, action-bound feedback that appears briefly to confirm or report the result of something the user just did.

Unit Field

A numeric input combined with a unit selector for measurements.