How To Get Hyperlinks Inside A "pop-up" Term Reference On Mouse-over, And Seperate The HTML Term From The "pop-up" Reference Content

This article is a follow-up/reformulation of the less-specific formulated question Is it possible to have a hyperlink inside {content:'...'}?. User Naeem Shaikh, to whom many than

Solution 1:

You could use sup to show content on hover, as suggested by chipChocolate.py. but as from this previous question by OP and my answer , I think you could just use a combination of both solutions.

The content is dynamically added to the dom via jquery, and using the markup chipChocolate.py suggested in comment above. see this

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<sup>Human papillomavirus<a href="http://en.wikipedia.org/wiki/Human_papillomavirus"> Wikipedia.</a></sup>');
    },function(){
       $(this).find('sup').remove();
    });
});

Solution 2:

Clarification by OP.

Here's just a full code clarification of Naeem Shaikh's answer, implemented as a fully integrated answer to the original question.

Please, vote for him, if you like his answer. This is just a clarification.

Because of Kroltan's comment I now switched the particular use of id and term, to fully allow multiple occurrences of the same term.

HTML

<br><a id="term" class="HPV">HPV</a>
<br><a id="term" class="HPV">HPV</a>
<br><a id="term" class="QA">QA</a>

CSS

a#term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted} a.term:hover{text-decoration:none; color:#aaaaaa}
a#term:hover{text-decoration:none; color:#aaaaaa}

JS (requires jQuery)

$(function(){$('.HPV').hover(function(e){$(this).append('<sup style="color:black"> Human papillomavirus. See: <a href="http://en.wikipedia.org/wiki/Human_papillomavirus">Wikipedia</a>.</sup>');},function(){$(this).find('sup').remove();});});
$(function(){$('.QA').hover(function(e){$(this).append('<sup style="color:black">Quality assurance. See: <a href="http://en.wikipedia.org/wiki/Quality_assurance"> Wikipedia</a>.</sup>');},function(){$(this).find('sup').remove();});});

---

If anyone would know how to change the color (or other CSS elements) of the content of jQuery's .append(...) inside CSS itself, thus "seperated" from the jQuery code? This would also be appreciated.