Components

Tooltip

A popup that reveals information when hovering over an element.

Usage

Use the default slot to define the Tooltip trigger and, optionally, the content slot to set its content.

Loading preview...

<template>
  <MeTooltip arrow>
    <UButton label="Hover me" />

    <template v-slot:content>
      I'm a tooltip!
    </template>
  </MeTooltip>
</template>

Arrow

Use the arrow prop to display an arrow on the popup.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    arrow
  >
    <UButton label="Hover me" />
  </MeTooltip>
</template>

Text

Use the text prop to set the content of the Tooltip.

<template>
  <MeTooltip
    arrow
    text="I'm a tooltip"
  >
    <UButton label="Hover me" />
  </MeTooltip>
</template>

Side

Use the side prop to set the positioning of the Tooltip.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    side="bottom"
    arrow
  >
    <UButton label="Hover me" />
  </MeTooltip>
</template>

Disabled

Use the disabled to disable the Tooltip.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    side="bottom"
    arrow
    disabled
  >
    <UButton label="Hover me" />
  </MeTooltip>
</template>

API

Props

Prop	Default	Type
`arrow`	`false`	`boolean` Displays an arrow on the Tooltip.
`disabled`	`false`	`boolean` Disabled the Tooltip.
`responsive`	`false`	`boolean` The tooltip is only visible when the target is truncated.
`side`	`'top'`	`'top' \| 'right' \| 'bottom' \| 'left'` The preferred side of the trigger to render against.
`text`		`string` Tooltip content.

Slots

Default	Type
`default`
`content`

Stepper

Uma sequência de passos com estado (pendente, concluído, sucesso ou erro) por item.

DESIGN.md

The visual contract of EletroDS. Color, spacing, typography, tokens for both the Vue and the React stack, tone of voice and logo usage. This is the file an AI agent should read before generating any Mercado Eletrônico interface.