Tooltip over mention node

[veverto]

Does anyone have an example, or idea, of how I could implement some sort of tooltip when hovering over a mention node?

[vinicius-eidy]

I has this issue and my idea that I implement was using Bootstrap in my project, becausa has a ready solution called Bootstrap Tooltips
Using Bootstrap:

<span data-type="mention" class="mentionstyle" data-id="WevertonRodrigues" contenteditable="false" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  @Weverton Rodrigues
</span>

[chasemcdo]

Also looking for the same behaviour. Has there been any recent advances that don't require an external package?

A couple possibilities I see are that the V3 roadmap mentions that renderHTML will allow the return of a JSX component, so the user can use their own custom tooltip logic there, but this is only available in the next branch until it reaches completion. This branch is presumably unstable and should not be used in a production environment if I understand correctly.

[nperez0111]

The JSX would compile to an array, so wouldn't help too much there.

For this, you are looking for addNodeView https://tiptap.dev/docs/examples/advanced/interactive-react-and-vue-views#implementing-react-or-vue-components-as-nodeviews

[chasemcdo]

yep! That is exactly it thank you! Found this working example too for future reference