<p>Not really a craft solution — but easiest might be jquery/ajax. Since you know the base URI, you can just create a selector for the route, and work from there.</p>

<pre><code>$("a[href*='route/to/definitions/']").each(function(){
    var $element = $(this);

    // ajax load content and place content in DOM somewhere
    $.get( $element.attr('href'), function(data) {
        $element.attr('data-definition') = data;
    });

    // click handler to prevent default link behavior
    $element.on('click', function(event){
        event.preventDefault()
    });

    // hover handler to display/hide definition
    $element.hover(displayDefinition, hideDefinition);
});
</code></pre>

<p>You could also potentially do a search/replace in twig, but it is not nearly as easy to manipulate as in js.</p>

CC BY-SA 3.0
2018-02-20T14:01:31.110Z
Thanks...interesting idea. I'm going to try it and see what I come up with. As a JS programmer, I should've thought of this one! ;-)
userAW
CC BY-SA 3.0
2018-02-20T14:01:55.707Z
I'm waiting to see if anyone else comes up with a Twig solution before marking the correct answer...thanks.
userAW
CC BY-SA 3.0
2018-02-20T23:43:39.110Z
Hmm, I'm looking at this again and don't really like it. This is really a back-end task, as JS is meant to be reserved for only user manipulations, not data cleaning. I'll have to think about this more. Still on the lookout for a good Twig answer :-)
userAW
CC BY-SA 3.0
2018-02-21T00:44:05.570Z
@userAW The options are pretty limited when it comes to rich text fields unless you write your own redactor plugin. The only options that come to mind is either: 1) storing the reference url in the href link (as above), or 2) creating a separate relation list, and adding reference markers in the text (i.e. [1],[2],etc... similar to how markup links are defined). Either way you would need to use javascript to prep/clean html afterwards. The only advantage of using option 2, is that you could preload all the definitions in twig. But who knows, maybe someone else has a good idea.
Douglas McDonald
CC BY-SA 3.0
2018-02-21T04:22:39.870Z
Can you direct me as to how to write my own Redactor plugin?
userAW
CC BY-SA 3.0
2018-02-22T01:51:51.363Z
@userAW Unfortunately, I'm not familiar with writing redactor plugins. Maybe take a look at the redactor files found in `craft/app/resources/lib/redactor/`, and see if anything can be adapted for your use.
Douglas McDonald
CC BY-SA 3.0
2018-03-23T13:33:09.753Z
I exhausted all Twig options (short of writing a custom plugin, which is outside my current CraftCMS skill level and time constraints) and used your suggestion instead. It works great! Thank you for your help.
userAW
CC BY-SA 3.0
2018-02-19T23:19:24.987Z
2018-02-19T23:19:24.987Z
Douglas McDonald
<p>I have a Glossary channel on my site, with Term and Definition fields. I would like Terms to display their definitions throughout the site...whenever so assigned by the content editor.</p>

<p>I currently have Rich Text fields allowing editors to create <em>links</em> from Terms to their Definitions by using Link to an Entry. This is not great in terms of UX as it forces sends site visitors to the main Glossary index page to view the Definitions; I'd like to implement a hover text for the Terms that shows the Definition right there, wherever the visitor is reading. </p>

<p>How can I filter these rich text fields in the templates to check for links to Glossary entries and output a hover text instead of a link? I haven't written any custom plugins or filters (yet), so I'm looking for pointers in the right direction. </p>

<p>Any other approaches that might solve my problem are welcome. </p>

<p>Thanks in advance for your help.</p>

<plugin-development><entries><redactor><filter><richtext>
How to output a Rich Text Link to an Entry as a tooltip?
# How to output a Rich Text Link to an Entry as a tooltip?

(Asked by: username_0 on 2018-02-16)

I have a Glossary channel on my site, with Term and Definition fields. I would like Terms to display their definitions throughout the site...whenever so assigned by the content editor.

I currently have Rich Text fields allowing editors to create *links* from Terms to their Definitions by using Link to an Entry. This is not great in terms of UX as it forces sends site visitors to the main Glossary index page to view the Definitions; I'd like to implement a hover text for the Terms that shows the Definition right there, wherever the visitor is reading.

How can I filter these rich text fields in the templates to check for links to Glossary entries and output a hover text instead of a link? I haven't written any custom plugins or filters (yet), so I'm looking for pointers in the right direction.

Any other approaches that might solve my problem are welcome.

Thanks in advance for your help.

**Tags:** plugin-development, entries, redactor, filter, richtext


---

## 1 answers

### Answer by username_1 on 2018-02-19. Score: 3 | Accepted answer

Not really a craft solution — but easiest might be jquery/ajax. Since you know the base URI, you can just create a selector for the route, and work from there.
$("a[href*='route/to/definitions/']").each(function(){
    var $element = $(this);

    // ajax load content and place content in DOM somewhere
    $.get( $element.attr('href'), function(data) {
        $element.attr('data-definition') = data;
    });

    // click handler to prevent default link behavior
    $element.on('click', function(event){
        event.preventDefault()
    });

    // hover handler to display/hide definition
    $element.hover(displayDefinition, hideDefinition);
});

You could also potentially do a search/replace in twig, but it is not nearly as easy to manipulate as in js.

> **Comments:**
> **username_0**: Thanks...interesting idea. I'm going to try it and see what I come up with. As a JS programmer, I should've thought of this one! ;-)  
> **username_0**: I'm waiting to see if anyone else comes up with a Twig solution before marking the correct answer...thanks.  
> **username_0**: Hmm, I'm looking at this again and don't really like it. This is really a back-end task, as JS is meant to be reserved for only user manipulations, not data cleaning. I'll have to think about this more. Still on the lookout for a good Twig answer :-)  
> **username_1**: @username_0 The options are pretty limited when it comes to rich text fields unless you write your own redactor plugin. The only options that come to mind is either: 1) storing the reference url in the href link (as above), or 2) creating a separate relation list, and adding reference markers in the text (i.e. [1],[2],etc... similar to how markup links are defined). Either way you would need to use javascript to prep/clean html afterwards. The only advantage of using option 2, is that you could preload all the definitions in twig. But who knows, maybe someone else has a good idea.  
> **username_0**: Can you direct me as to how to write my own Redactor plugin?  
> **username_1**: @username_0 Unfortunately, I'm not familiar with writing redactor plugins. Maybe take a look at the redactor files found in `craft/app/resources/lib/redactor/`, and see if anything can be adapted for your use.  
> **username_0**: I exhausted all Twig options (short of writing a custom plugin, which is outside my current CraftCMS skill level and time constraints) and used your suggestion instead. It works great! Thank you for your help.  

---

