工具提示

一个工具提示注释，其中工具提示内容可以是任何 MDX 内容。

content.mdx

<CodeWithTooltips>

```js !code
// !tooltip[/lorem/] description
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !tooltip[/consectetur/] inspect
  return sit ? consectetur(ipsum) : []
}
```

## !!tooltips description

### Hello world

Lorem ipsum **dolor** sit amet `consectetur`.

Adipiscing elit _sed_ do eiusmod.

## !!tooltips inspect

```js
function consectetur(ipsum) {
  const { a, b } = ipsum
  return a + b
}
```

</CodeWithTooltips>

function (ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? (ipsum) : []
}

悬停（或聚焦）lorem 和 consectetur 标记以查看相应的工具提示。

Implementation

在我们高亮代码后，我们查找查询与工具提示标题匹配的注释。如果找到匹配项，我们将工具提示内容包含在注释数据中。

code.tsx

import { Block, CodeBlock, parseProps } from "codehike/blocks"
import { Pre, highlight } from "codehike/code"
import { z } from "zod"

const Schema = Block.extend({
  code: CodeBlock,
  tooltips: z.array(Block).optional(),
})

async function CodeWithTooltips(props: unknown) {
  const { code, tooltips = [] } = parseProps(props, Schema)
  const highlighted = await highlight(code, theme)

  highlighted.annotations = highlighted.annotations.map((a) => {
    const tooltip = tooltips.find((t) => t.title === a.query)
    if (!tooltip) return a
    return {
      ...a,
      data: { ...a.data, children: tooltip.children },
我们将工具提示内容存储在注释数据中
    }
  })
  return <Pre code={highlighted} handlers={[tooltip]} />
}

然后我们定义一个 AnnotationHandler 来使用 shadcn 工具提示组件内联渲染工具提示（npx shadcn@latest add tooltip）：

code.tsx

import { AnnotationHandler } from "codehike/code"
import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip"

const tooltip: AnnotationHandler = {
  name: "tooltip",
  Inline: ({ children, annotation }) => {
    const { query, data } = annotation
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger className="underline decoration-dashed">
            {children}
          </TooltipTrigger>
          <TooltipContent align="start">
            {data?.children || query}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    )
  },
}

改进建议

您可以使用相同的概念不仅在工具提示中嵌入 MDX，还可以在其他注释中嵌入，如标注。