Skip to main content
Browse docs

Marwes documentation

Tooltip

Contextual-help family with a standalone tooltip component, a canonical TooltipGroup path, and an explicit non-interactive scope boundary.

What this family solves

Contextual-help family with a standalone tooltip component, a canonical TooltipGroup path, and an explicit non-interactive scope boundary.

Use when

  • The UI needs short, non-interactive contextual help tied to an icon trigger or a placement-owned tooltip bubble.
  • The product flow benefits from TooltipGroup's built-in trigger naming and hover or focus reveal behavior.
  • The team wants React and Vue tooltip behavior to stay aligned through one shared contract file.

Avoid when

  • The content needs links, buttons, forms, or any other focusable interactive elements.
  • The UI really needs a popover, dialog, or other richer overlay rather than short contextual help.
  • The team expects collision detection, delay tuning, or a general-purpose overlay API that this family does not define.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Tooltip, TooltipGroup

Types

TooltipGroupProps, TooltipProps

Vue — @marwes-ui/vue

Components

Tooltip, TooltipGroup

Types

TooltipGroupProps, TooltipProps

Svelte — @marwes-ui/svelte

Components

Tooltip, TooltipGroup

Types

TooltipGroupProps, TooltipProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { TooltipGroup } from "@marwes-ui/react"

export function Example() {
  return (
    <TooltipGroup
      content="Your profile is visible to workspace members."
      triggerLabel="About profile visibility"
    />
  )
}

Vue

<script setup lang="ts">
import { TooltipGroup } from "@marwes-ui/vue"
</script>

<template>
  <TooltipGroup
    content="Your profile is visible to workspace members."
    trigger-label="About profile visibility"
  />
</template>

Svelte

<script lang="ts">
  import { TooltipGroup } from "@marwes-ui/svelte"
</script>

<TooltipGroup
  content="Your profile is visible to workspace members."
  triggerLabel="About profile visibility"
/>

Accessibility requirements

  • Supplementary content only: Keep tooltip content supplementary; never put required information only inside a tooltip.
  • Keyboard reachable dismissal: Verify the trigger is reachable and dismissible by keyboard, not only by pointer hover.
  • Focus and escape review: Test focus entry, focus return, dismissal, and escape-key behavior in context.
  • Manual review boundary: Real browser and assistive-technology validation for tooltip announcement timing and keyboard feel.
  • Manual review 2: Future decisions about which tooltip stories should join stricter automated accessibility gates.
  • Manual review 3: Whether clearly interactive tooltip content should eventually trigger dev-time warnings.

Theming

Tooltip uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources