GrTooltip

<script setup lang="ts">
import { GrTooltip } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-4">
    <label class="inline-flex items-center gap-2 text-sm font-600 text-[var(--gr-fg)]">
      Notification email
      <GrTooltip text="We use this address only for billing alerts and incident updates." />
    </label>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] bg-[var(--gr-muted)]/60 p-4 text-sm text-[var(--gr-muted-fg)]">
      Hover or focus the info icon to inspect the help copy.
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrTooltip } from '@feugene/granularity'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <GrTooltip text="Custom slot lets you attach the tooltip to any trigger element.">
      <button
        type="button"
        class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--gr-brd)] bg-[var(--gr-card)] text-sm font-700 text-[var(--gr-fg)] transition-colors hover:bg-[var(--gr-muted)]"
        aria-label="Open contextual help"
      >
        ?
      </button>
    </GrTooltip>

    <span class="text-sm text-[var(--gr-muted-fg)]">
      Reuse the same tooltip primitive for icon buttons, labels or table headers.
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrInput, GrTooltip } from '@feugene/granularity'

const tooltipText = ref('Escalation policy will be applied to new alerts only.')
const iconColor = ref('var(--gr-warning)')

// Пресеты цвета иконки из палитры GrTone: клик подставляет валидную CSS-переменную
// темы в инпут `icon-color` (раньше в демо был несуществующий `var(--warning)`).
const tonePresets: Array<{ tone: string, value: string }> = [
  { tone: 'primary', value: 'var(--gr-primary)' },
  { tone: 'neutral', value: 'var(--gr-muted-fg)' },
  { tone: 'success', value: 'var(--gr-success)' },
  { tone: 'warning', value: 'var(--gr-warning)' },
  { tone: 'danger', value: 'var(--gr-danger)' },
  { tone: 'info', value: 'var(--gr-info)' },
  { tone: 'slate', value: 'var(--gr-slate)' },
  { tone: 'azure', value: 'var(--gr-azure)' },
]
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-3">
      <span class="text-sm font-600 text-[var(--gr-fg)]">
        Custom tone
      </span>
      <GrTooltip :text="tooltipText" :icon-color="iconColor" />
      <code class="rounded bg-[var(--gr-muted)] px-2 py-1 text-xs text-[var(--gr-muted-fg)]">
        icon-color="{{ iconColor }}"
      </code>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <button
        v-for="preset in tonePresets"
        :key="preset.tone"
        type="button"
        class="inline-flex items-center gap-2 rounded-full border border-[var(--gr-brd)] px-3 py-1 text-xs font-600 transition-colors hover:bg-[var(--gr-muted)]"
        :class="iconColor === preset.value ? 'ring-2 ring-[var(--gr-ring)]' : ''"
        @click="iconColor = preset.value"
      >
        <span class="h-3 w-3 rounded-full" :style="{ backgroundColor: preset.value }" />
        {{ preset.tone }}
      </button>
    </div>

    <div class="grid gap-3 md:grid-cols-2">
      <GrInput v-model="tooltipText" placeholder="Tooltip text" />
      <GrInput v-model="iconColor" placeholder="var(--gr-warning) / #f59e0b" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrTooltip } from '@feugene/granularity'

const sizes = ['xs', 'sm', 'md', 'lg'] as const
</script>

<template>
  <div class="flex flex-wrap items-center gap-6">
    <div v-for="size in sizes" :key="size" class="flex items-center gap-2">
      <span class="text-xs font-semibold text-[var(--gr-muted-fg)]">
        size="{{ size }}"
      </span>

      <GrTooltip :size="size" text="Billing runs on the first day of each month." />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { GrTooltipPlacement } from '@feugene/granularity'
import { GrButton, GrSegmented, GrSwitch, GrTooltip } from '@feugene/granularity'

const placement = ref<GrTooltipPlacement>('top')
const openDelay = ref(400)
const disabled = ref(false)

const placements = [
  { value: 'top', label: 'top' },
  { value: 'right', label: 'right' },
  { value: 'bottom', label: 'bottom' },
  { value: 'left', label: 'left' },
]

const actions = ['Merge', 'Revert', 'Rebase'] as const
</script>

<template>
  <div class="grid gap-5">
    <div class="flex flex-wrap items-center gap-4">
      <GrSegmented v-model="placement" size="sm" :options="placements" />

      <label class="flex items-center gap-2 text-sm text-[var(--gr-muted-fg)]">
        <GrSwitch v-model="disabled" size="sm" />
        disabled
      </label>
    </div>

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-6">
      <div class="flex flex-wrap items-center gap-2">
        <GrTooltip
          v-for="action in actions"
          :key="action"
          :placement="placement"
          :open-delay="openDelay"
          :close-delay="120"
          :disabled="disabled"
          :text="`${action} — задержка ${openDelay} мс, подсказка не мигает при проведении курсором`"
        >
          <GrButton size="sm" variant="outline">
            {{ action }}
          </GrButton>
        </GrTooltip>
      </div>

      <p class="mt-4 text-sm text-[var(--gr-muted-fg)]">
        Обёртка не добавляет второй остановки Tab: описание уезжает на саму
        кнопку, и до подсказки доходит и клавиатура, и скринридер.
      </p>
    </div>
  </div>
</template>