Tooltip | DocsKit

Install

$ pnpm dlx shadcn@latest add https://docskit.codehike.org/r/tooltip?token=*****

Add the tooltip handler:

@/components/code.handlers.tsx

+
import { tooltip } from "./tooltip"

export function getHandlers(options: CodeGroup["options"]) {
  return [
    line,
+
    tooltip,
  ]
}

Add the WithNotes component so that it's available in your MDX files:

@/components/docskit.tsx

+
import { WithNotes } from "./notes"
+
import { TooltipLink } from "./tooltip"

export function addDocsKit(
  components: MDXComponents,
) {
  return {
    ...components,
    DocsKitCode,
+
    WithNotes,
    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+
      if (props.href?.startsWith("tooltip:")) {
+
        return <TooltipLink {...props} />
+
      }
      return React.createElement(components?.a || "a", props)
    },
  }
}

ExamplesTry them in the Playground

content.mdx

<WithNotes>

```js
function lorem(ipsum) {
  // !tooltip[/ipsum/] foo
  return ipsum
}
```

## !foo

This is a **tooltip**.

</WithNotes>

preview

function lorem(ipsum) {
  return ipsum
}

With code inside a tooltip:

content.mdx

<WithNotes>

```js index.js
function lorem(ipsum) {
  // !tooltip[/dolor/] foo
  return dolor(ipsum)
}
```

```js !foo math.js
export function dolor(x) {
  return x * x
}
```

</WithNotes>

preview

index.js

function lorem(ipsum) {
  return dolor(ipsum)
}

With code inside a tooltip:

content.mdx

<WithNotes>

```js index.js
function lorem(ipsum) {
  // !tooltip[/dolor/] foo
  return dolor(ipsum)
}
```

```js !foo math.js
export function dolor(x) {
  return x * x
}
```

</WithNotes>

preview

index.js

function lorem(ipsum) {
  return dolor(ipsum)
}

Using tooltips in prose:

content.mdx

<WithNotes>

- Either [code tooltips](tooltip:code)
- Or [normal tooltips](tooltip:prose)

```json !code data.json
{
  "lorem": "ipsum dolor sit amet",
  "foo": [4, 8, 15, 16]
}
```

## !prose

This is a **tooltip**.

</WithNotes>

preview

Either code tooltips
Or normal tooltips