Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

Tooltip functionality in TinyMCE with dictionary

Vote:
 

Hi experts, 

Our editors want to have a tooltip they can add in the text-editor in the CMS. They want to have some sort of dictionary or database with word definitions and explanations they can add to a specific word they use when they type it in. 

Does anyone have experience with this, or have implemented something similiar?

I see that all major institutions and websites have these tooltip explanations. How can we enable our editors to control this?

 

All the best,

Eivind

#336901
Feb 19, 2025 8:52
Vote:
 

Hi Edvind! 


I think the solution is could be either simple or less simple.  Is the dictionary/database in CMS? Is it language specific?

So you could either inject a "html template"  with a parameter name that on the live page being replaced by javascript depending of the parameter. 

Altenate solution would be to create a selector or search what fetches that pair of definition/explanation using internal api controller and inject into tinymce. You would perhaps need a language parameter here too. Drawback here would be not being able to edit the injected definition in a good way.

 

#337009
Feb 26, 2025 8:47
Vote:
 

Hi JOnas,


Thank you for your answer. 
The dictionary does not exist yet, but should be maintained by the editors in the CMS. We operate with only one language.
I'm not entirely sure how to make it, a dictionary list with the word itself as key maybe. Ideally i would want a plugin where you can select an explanation. You could have two explanations for the same word for different contexts. 

I have been thinking the same as what you suggest in your "alternate solution". Drawback is that you can have only one definition if it is fetched based on a key that is the word itself. 

Didnt understand what you meant by injecting a "html template" with a parameter name though :) 

As for the plugin itself, I didn't find anything on the big internet, so Im trying to write my own plugin. I'm struggling with few or none good examples though. The examples i found are like 7 years old or older, and not compatible with the newest tinymce. My hopes were that someone else had encountered this exact problem and shared the implementation somewhere :)

 

// Eivind

#337015
Feb 26, 2025 13:45
Jonas Boman - Feb 27, 2025 12:37
By Html Template I ment adding a custom toolbar button i Tiny Mce. First iteration could be a static list of terms. That is being injected in the XhtmlString propery value to create a fragment. When the property is rendered to the page (DisplayTemplate for XhmlString) go through the fragments, take out the term, fetch description related to that term and do a replace.

I do not have an example. Just top of my head.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.