How to get hyperlinks inside a “pop-up” term reference on mouse-over, and seperate the HTML term from the “pop-up” reference content


Tags: jquery,html,css

Problem :

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 thanks, friendly and successfully helped me having a hyperlink on mouse-hover, after an HTML tag with a specific id (here called "HPV"), using jQuery. Full credit for the JS help goes to him.

When I adapted this to my specific content (a term description), I get the following (formerly: JSFiddle 1):

HTML

<br><br>
<a class="term" id="HPV">HPV</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:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black; background-color:white}

a.term#HPV:hover:after{content:"Human papillomavirus."}

JS (requires jQuery)

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

Now my next question is how to get the hyperlink "inside/after" the content of the after-selector. Instead of just after the content of the original HTML tag itself.

In my example: after "Human papillomavirus.", as such:


          Human papillomavirus. Wikipedia.
HPV


Instead of how it is now:


                          Human papillomavirus.
HPV Wikipedia.


I guess this calls for an ingenious way to have these links positioned inside the content of the :after-selector: especially when more than 1 link should be inserted, with extra text/content in between.

---

A small remark/glitch: as it is now, you can't put the "dot" .after Wikipedia on the right-side of the </a> in the JS. Or rather: you can, but then the CSS of the original tag (in CSS: a.term:hover) would unfortunately be adopted (cf. the gray color of the . then).

The same behavior can be seen now, since, the hyperlink adopts the gray color of the "parent" tag.

---

Another way to generally deal with the whole question (to have hyperlinks inside such a "on-hover term description"), is not to use the CSS :after-selector, and manually have an extra e.g. div, right after the original HTML tag, to account for a "pop-up description", as such (formerly: JSFiddle 2):

HTML

<br>

<a id="term">HPV</a><div>Human papillomavirus. <a href="http://en.wikipedia.org/wiki/Human_papillomavirus">Wikipedia</a>.</div>

CSS

a#term:hover + div{display:inline} a#term + div{display:none; border:1px dotted #aaaaaa; padding:1px; top:-1em; position:relative}

Of course this is not ideal, because this is a trade-off with loss of ease on data-handling (especially when a term occurs multiple times in a document) and HTML readability.

Without the :after-tag also, could be to have a more jQuery centered approach, and to have the full content (regular text and links) of the reference inside the jQuery. One could then use some additional CSS on the jQuery, I suppose?



Solution :

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();
    });
});

    CSS Howto..

    TYPO3: how to add an element to the RTE, which allows the user to use a defined CSS class

    How to Click a div and have it change dimensions of other divs and then change back once clicked again

    How to set a box on bottom of a box?

    How do I change the function of a button when the window size changes?

    How to set the universal CSS selector with JavaScript?

    How to add color to text in my div with code

    css how to only make bold fonts for first
      set

    HTML DIV Overflowing, How To Stop?

    How do I vertically and horizontally center all these elements?

    How to make an item background visible on overflow?

    how to position a search bar in html/css

    How to change TextBox class based on input

    How to animate DOM elements with JavaScript/CSS

    How to automaticly let HTML cut the edges based on the setted height of the image?

    How to share common css and other resources among grails projects?

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    How Do I Add Colgroup Tag to ASP:Datagrid Control?

    How do you make an input element fill parent?

    How do I make a div link open in a new tab Javascript onClick="window.location

    How can I get jQuery to toggle a class with fadeToggle?

    How to change css by using tag or class name in typescript?

    How to adjust the size of background image with browsers window using media queries

    How can I format my css text so that the result is in 2 columns?

    how to make css tooltip not push elements outline in FF

    How to achieve pages like a math notebook in css?

    How do I get ui-sortable to only work on a specific id in CSS?

    How can I import a single string line of text to multiple HTML files?

    How to auto fit input field after dynamically added spans?

    How can I use Modernizr to get border-radius working in IE8?

    How to reuse and override Css style?