Forum Academy Marketplace Showcase Pricing Features

Text annotation system like Genius.com

Need help App Organization
#1

Hi everyone,

I’m trying to create an app that works like Genius.com, formerly known as RapGenius. It is a service that let users add annotation to songs lyrics in order to provide explanations for them. (example of a Genius.com song page)

On Genius, users select some text, then a pop-up suggest them to write an annotation. Once they publish their annotation, the text they selected become clickable, and if you click on it, you’ll see the said annotation on the right side of the text.

Using the Text Selection plugin, I managed to create a pop-up that ask the user what is his annotation. But then I am stuck at:

  • Adding, on the side of the text, at the level of the annotated sentence, a container with the annotation

How could I do?

#2

Not sure if you’ve seen this or not, but there’s a great plugin called Selected Text Menu and Text Highlighter from @ahmadnaser16an. He’s looking into a big right now, but it looks really promising.

#3

Thanks for this answer, this is a really nice plug-in. Thanks to this I can create a button “Annotate the selected text”.
However I am still stuck at creating a workflow to add the annotation on the side of the selected text. Do you know how I could do that?

#4

Reformulating my question:

How can I create a dynamic element at a location defined relatively to the selected text?

#5

Bumping this. I am curious to know the answer as well