Tooltip

<script setup lang="ts">
import { BookmarkIcon } from "@lucide/vue"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
</script>

<template>
  <Tooltip default-open>
    <TooltipTrigger aria-label="Add to library">
      <BookmarkIcon aria-hidden="true" />
    </TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</template>

<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"

const sides = [
  { side: "top", label: "Top" },
  { side: "left", label: "Left" },
  { side: "right", label: "Right" },
  { side: "bottom", label: "Bottom" },
] as const
</script>

<template>
  <div data-slot="grid">
    <Tooltip v-for="{ side, label } in sides" :key="side">
      <TooltipTrigger>{{ label }}</TooltipTrigger>
      <TooltipContent :side="side">Add to library</TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { InfoIcon } from "@lucide/vue"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
import { useTemplateRef } from "vue"

const field = useTemplateRef<HTMLDivElement>("field")
</script>

<template>
  <Field>
    <FieldLabel>Webhook URL</FieldLabel>
    <div ref="field" data-slot="row">
      <Input placeholder="https://" />
      <Tooltip>
        <TooltipTrigger aria-label="About webhooks">
          <InfoIcon aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent :anchor="field" side="bottom" align="start">
          We send a POST request here for every new order.
        </TooltipContent>
      </Tooltip>
    </div>
  </Field>
</template>

<script setup lang="ts">
import { SaveIcon } from "@lucide/vue"
import { registerShortcut } from "@ui-sdk/core/shortcuts"
import {
  Tooltip,
  TooltipContent,
  TooltipShortcut,
  TooltipTrigger,
} from "@ui-sdk/vue/tooltip"
import { onMounted, onUnmounted } from "vue"
import { useLog } from "./log"

const log = useLog()
const offs: (() => void)[] = []

onMounted(() => {
  offs.push(
    registerShortcut("mod+s", () => log("Saved")),
    registerShortcut("mod+shift+e", () => log("Shared"))
  )
})
onUnmounted(() => offs.forEach((off) => off()))
</script>

<template>
  <div data-slot="row">
    <Tooltip shortcut="mod+s">
      <TooltipTrigger aria-label="Save" @click="log('Saved')">
        <SaveIcon aria-hidden="true" />
      </TooltipTrigger>
      <TooltipContent>
        Save
        <TooltipShortcut />
      </TooltipContent>
    </Tooltip>
    <Tooltip shortcut="mod+shift+e">
      <TooltipTrigger @click="log('Shared')">Share</TooltipTrigger>
      <TooltipContent>
        Share with your team
        <TooltipShortcut />
      </TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
import { computed, ref } from "vue"
import { useLog } from "./log"

const log = useLog()
const title = ref("")
const blocked = computed(() => !title.value.trim())

function publish() {
  if (!blocked.value) {
    log(`Published “${title.value.trim()}”`)
  }
}
</script>

<template>
  <div data-slot="stack">
    <Field>
      <FieldLabel>Post title</FieldLabel>
      <Input v-model:value="title" />
    </Field>
    <Tooltip :disabled="!blocked">
      <TooltipTrigger
        data-variant="solid"
        :aria-disabled="blocked || undefined"
        @click="publish"
      >
        Publish
      </TooltipTrigger>
      <TooltipContent side="right">Add a title to publish</TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { InfoIcon } from "@lucide/vue"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
</script>

<template>
  <div data-slot="row">
    <span data-slot="label">Storage</span>
    <Tooltip toggleable>
      <TooltipTrigger aria-label="About storage" data-size="sm">
        <InfoIcon aria-hidden="true" />
      </TooltipTrigger>
      <TooltipContent>Files in the trash still use storage.</TooltipContent>
    </Tooltip>
    <span data-slot="hint">12.4 of 15 GB used</span>
  </div>
</template>

<script setup lang="ts">
import { CheckIcon, CopyIcon } from "@lucide/vue"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
import { ref } from "vue"

const command = "npm install @ui-sdk/vue"
const copied = ref(false)

function copy() {
  navigator.clipboard?.writeText(command).catch(() => {})
  copied.value = true
}
</script>

<template>
  <div data-slot="row">
    <code>{{ command }}</code>
    <Tooltip
      :close-on-press="false"
      @open-change-complete="(open) => !open && (copied = false)"
    >
      <TooltipTrigger :aria-label="copied ? 'Copied' : 'Copy'" @click="copy">
        <CheckIcon v-if="copied" aria-hidden="true" />
        <CopyIcon v-else aria-hidden="true" />
      </TooltipTrigger>
      <TooltipContent>{{ copied ? "Copied" : "Copy" }}</TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { FileIcon } from "@lucide/vue"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"

const files = [
  "Quarterly report, final revised version for the board.pdf",
  "Notes.txt",
  "Design review recording, October 2nd.mp4",
  "Budget.xlsx",
]

const names = new Map<string, HTMLElement>()

function fits(file: string) {
  const span = names.get(file)
  return !!span && span.scrollWidth <= span.clientWidth
}
</script>

<template>
  <ul>
    <li v-for="file in files" :key="file">
      <Tooltip
        type="label"
        @open-change="(open, details) => open && fits(file) && details.cancel()"
      >
        <TooltipTrigger>
          <FileIcon aria-hidden="true" />
          <span :ref="(el) => el && names.set(file, el as HTMLElement)">{{
            file
          }}</span>
        </TooltipTrigger>
        <TooltipContent>{{ file }}</TooltipContent>
      </Tooltip>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { CheckIcon } from "@lucide/vue"
import type { ChangeDetails } from "@ui-sdk/core"
import { Checkbox, CheckboxIndicator } from "@ui-sdk/vue/checkbox"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
import { ref } from "vue"
import { useLog } from "./log"

const log = useLog()
const open = ref(false)
const controls = ref<HTMLElement | null>(null)

function onOpenChange(next: boolean, details: ChangeDetails) {
  const target = details.event?.target
  const inControls = target instanceof Node && controls.value?.contains(target)
  if (inControls && details.reason !== "escape-key") {
    return details.cancel()
  }
  log(`${next ? "Opened" : "Closed"} (${details.reason})`)
}
</script>

<template>
  <div data-slot="stack">
    <div ref="controls" data-slot="controls">
      <label data-slot="label">
        <Checkbox v-model:checked="open">
          <CheckboxIndicator>
            <CheckIcon aria-hidden="true" />
          </CheckboxIndicator>
        </Checkbox>
        Open
      </label>
    </div>
    <Tooltip v-model:open="open" @open-change="onOpenChange">
      <TooltipTrigger>Export</TooltipTrigger>
      <TooltipContent>Download as CSV</TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { BoldIcon, ItalicIcon, UnderlineIcon } from "@lucide/vue"
import {
  createTooltipController,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@ui-sdk/vue/tooltip"

const formats = [
  { icon: BoldIcon, label: "Bold" },
  { icon: ItalicIcon, label: "Italic" },
  { icon: UnderlineIcon, label: "Underline" },
]

const tooltip = createTooltipController<string>()
const LabelTooltipContent = TooltipContent<string>
</script>

<template>
  <div data-slot="row" role="group" aria-label="Formatting">
    <TooltipTrigger
      v-for="format in formats"
      :key="format.label"
      :controller="tooltip"
      :payload="format.label"
      :aria-label="format.label"
    >
      <component :is="format.icon" aria-hidden="true" />
    </TooltipTrigger>
    <Tooltip :controller="tooltip">
      <LabelTooltipContent v-slot="{ state }">{{
        state.payload
      }}</LabelTooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { ArchiveIcon } from "@lucide/vue"
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
import { useLog } from "./log"

const log = useLog()
</script>

<template>
  <Tooltip
    @open-change="(open) => log(open ? 'Opening' : 'Closing')"
    @open-change-complete="(open) => log(open ? 'Open' : 'Closed')"
  >
    <TooltipTrigger aria-label="Archive">
      <ArchiveIcon aria-hidden="true" />
    </TooltipTrigger>
    <TooltipContent>Archive</TooltipContent>
  </Tooltip>
</template>

<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from "@ui-sdk/vue/tooltip"
</script>

<template>
  <Tooltip>
    <TooltipTrigger data-variant="link">
      <template #render="{ props }">
        <a v-bind="props" href="https://example.com/changelog">Changelog</a>
      </template>
    </TooltipTrigger>
    <TooltipContent>See what's new in 2.0</TooltipContent>
  </Tooltip>
</template>