Is it possible to use tooltips if you only have access to HighlightedCode

[C-Loftus]

I am using Codehike with Docusaurus. I would like to add tooltips. The example in the docs show us checking the props on the which contains a CodeBlock property and tooltips.

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

However, in docusaurus, we seem to only have access to HighlightedCode. Thus, I wasn't sure if there is any way to use tooltips in Docusaurus.

Thank you

export function MyCode({ codeblock }: { codeblock: HighlightedCode }) {
  return (
    <div>
      <Pre
        code={codeblock}
        handlers={[callout]}
        style={{ background: "#212121", color: "#fafafa" }}
      />
    </div>
  )
}

I referenced the docusaurus config here:
https://github.com/code-hike/examples/blob/4f9bfc99a5d55275450c4606e9ef55b3de2afdac/with-docusaurus/src/components/code.tsx

[pomber]

Yes, you don't need to call highlight, the code is already highlighted.

Also, you need to change the Schema to use HighlightedCodeBlock

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

function CodeWithTooltips(props: unknown) {
  const { code, tooltips = [] } = parseProps(props, Schema)
  const highlighted = code
  ...

[C-Loftus]

My markdown is similar to one of the code examples in the docs: https://codehike.org/docs/code/tooltip. It is just the following with no other content. (escaped here to show raw md but in my code it isn't escaped)

# Test
```js
// !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) : []
}
```

Having issues with stackblitz not replicating my node env but if it is relevant, the code can be found at internetofwater/docs.geoconnex.us#25 where test.md is the markdown used, code.tsx is the component, and docusaurus.config.ts is the config where I add codehike to docusaurus.

Thank you!

[pomber]

Not sure I understand, that markdown is very different from the mdx from the tooltip example, the Schema you are using there is for the CodeWithTooltips component from the example, that's a different component than MyCode.

[C-Loftus]

Sorry yeah I was trying to get at the fact that the highlighted code is the same. I think I am a bit confused since I thought the example in the response above was for a HighlightedCode component. I thought only the code was important as long as the code component is the same.

I am realizing now that I can't use shadcn due to its tailwind dependency so maybe this example isn't a good fit for me either way.

[pomber]

I am realizing now that I can't use shadcn due to its tailwind dependency so maybe this example isn't a good fit for me either way.

You can use any tooltip component, or build your own, it's not tied to shadcn.

I recommend you start from the callout example, and convert it into a tooltip. Once you have that, try to adapt the tooltip example from the docs, which is more complex but more powerful.

[C-Loftus]

Yup that makes sense, I will take a look at that; thank you.