Add tooltip to linted words

1

I’m working on an editor that will highlight words that match certain rules, which I got working with the help of the linting example!

It looks and works great but my next step is adding a tooltip to those words that the linter picks up and… that’s where I’m stuck.

I’m adding classes with Decoration.inline but is there a way I can wrap the values in a span with a click function?

Any tips or pointers would be awesome

Thanks!

2

Welcome to ProseMirror :wink:

Naive approach: Could you maybe attach the tooltip using a :before element? When creating the inline widget, add an attribute with a title to the problem inline decoration (just like you’re adding the class). Then do sth like:

.problem:hover:before {
   transform: translateY(-1.2rem);
   content: "PROBLEM:" attr(title);
   position: absolute;
}

This leaves problems with positioning but it will span the entire decoration. Of course you can always place another widget before the element.

1 Like
3

The way the footnote editor is positioned in the footnote example might also be useful.

1 Like
4

I am facing the same issue, did you managed to find a solution or workaround?