Streaming live at 10am (PST)

Possible to create tooltips within CMS

Is it possible to create tooltips for text within a CMS Rich Text Item?

I’m looking to recreate something like is achieved here (https://wonderopolis.org/wonder/why-do-we-change-the-clocks-twice-a-year), where a user hovers over a word highlighted in yellow and is presented with a definition.

Thanks.

Since custom code can be placed inside (embedded) a rich text field you could accomplish this with custom code. All the content would need to be HTML and normally one would use a script that targeted data attributes.

1 Like

Thanks @webdev. I guess it might be tricky to do in large volumes (e.g. 50+ words/definitions per CMS item).

Or perhaps for each CMS item there could be a link to an external JSON file with the words/definitions, then there was a script that looped through for each word on the page and if it existed in the JSON file, a tooltip could be created.

Do you think this would be a viable option?

@alastairbudge you could use a keys / values (words / definitions) JavaScript object and loop through the entire document and add a mouse over listener on each keys (words) which would trigger the tooltip. Or if you want to do it within the CMS, you could create a collection just for words/definition, hide it on the layout and push its content within a javascript array or an object and repeat the process mentioned earlier.

@anthonysalamin this could be achieved without specifying which words in the CMS Rich Text Element were keywords, right? The text that contains the words (to be defined) will be circa 2K words, and there will be approximately 100 words to be defined per CMS item.

Thanks for your swift response btw.

Given the volume of words, and the fact that a different definition might be given in a different CMS item (to reflect the fact that words mean different things in different context), I think this could end up being very wieldy.