0

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?

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28
  • (typo) You have extra notations `;;` – Roko C. Buljan Jan 22 '15 at 13:13
  • Is `` a valid HTML5 tag? – Roko C. Buljan Jan 22 '15 at 13:16
  • @RokoC.Buljan I see, thanks. At these 2 instances, should I just I keep 1 `;` or remove both `;;`? It is still working when I remove both, but would that be the "normal/safe/readable" way? -- I am very unexperienced with JS. – O0123 Jan 22 '15 at 13:17
  • No, `` isn't a standard HTML-any? tag. Is it a beginner's mistake to choose non-standard tags? I find it better readable and time saving. – O0123 Jan 22 '15 at 13:18
  • 1
    Browsers like IE won't recognize non-standard tags. For conveying meaning, use classes. Eg: `
    ...whatever...
    ` and use class selectors: `.term:hover {etc: et al;}`     – This company is turning evil. Jan 22 '15 at 13:44
  • 1
    While modern browsers usually won't make a fuss of unknown tags, you might get unknown behavior on some devices. Also, you're defeating the point of semantics entirely, for example, your site would be practically unusable to anyone using reading aid or anything likewise. – Etheryte Jan 22 '15 at 13:44
  • Thank you @Kroltan. I'll stick with `` then, I think, in this case, as it is shorter than `class`, if that wouldn't cause too much problems? --- And thank you @Nit, that's interesting, I wasn't aware of that problem. One reason more to standardize. --- I'll do that in a moment. – O0123 Jan 22 '15 at 13:49
  • 1
    @VincentVerheyen - How about this? ---> [Fiddle](http://jsfiddle.net/6khspLg1/3/) – Weafs.py Jan 22 '15 at 13:55
  • @chipChocolate.py - I'll adjust my title to make my reply more relevant. You answered perfectly, my title was not to the point, I'm sorry. --- Very nice, but you have the same problem as with the alternative way ([JSFiddle 2](http://jsfiddle.net/VincentVerheyen/pkg8h762/1/)), described in the question. I agree that this is workable, but I think it might be good to seperate the content of the pop-up "positionally" (in the code) from the original HTML term. --- I even think it might be better, actually, to provide a solution completely without the `:after`-selector, and use only the JS-solution. – O0123 Jan 22 '15 at 14:06
  • 1
    @VincentVerheyen It's actually considered better practice to use CSS for presentational effects, rather than JavaScript or a JS library like jQuery, where you can. Is there a specific reason you want to keep the content out of the HTML? Any size added to the file from additional markup is saved with more efficient CSS and no JavaScript/jQuery. – TylerH Jan 22 '15 at 14:15
  • @TylerH.. http://stackoverflow.com/questions/28087772/is-it-possible-to-have-a-hyperlink-inside-an-aftercontent-selector-onl/28087923#28087772 previous question by OP – Naeem Shaikh Jan 22 '15 at 14:17
  • @TylerH - The reason was mainly the same as the reason why [Markdown](http://en.wikipedia.org/wiki/Markdown) is successful: so that you can read the HTML in an intuitive content-focused way, without being distracted by the meta-markup. --- Further more, it would be easy (read: in a single position) to adapt the "pop-up" reference of a certain term, when this term is occurring frequently throughout the document. – O0123 Jan 22 '15 at 14:18
  • @VincentVerheyen I'm not sure I follow. The audience is normal people, or web developers analyzing your markup? If it's the former, then CSS will hide meta-information until mouse-over, no problem there. If it's the latter, then no, developers looking through markup are not concerned with how it reads to them *within the markup*. Either way your concern is not really a problem. It is just as hidden in the final output whether you use JavaScript or CSS. – TylerH Jan 22 '15 at 14:23
  • @TylerH - Interesting analysis. You are right of course about both the interests of both these target audiences. --- However, my target audience (as for the coding behind the scenes) is that of the writer himself, which is in this case both a coder as also a writer of content. In this sense, I referred to the ease of the WYSIWYG-trademark of Markdown. --- As I am working with Drupal, another way to achieve this would be the [taxonomy tooltip](https://www.drupal.org/project/taxonomy_tooltip)-module, but unfortunately I wasn't able to get that to work. – O0123 Jan 22 '15 at 14:32
  • @VincentVerheyen, responding your response about IDs: If you prefer... Just remember that IDs ***must*** be unique on the page, no two elements can ever share the same ID. – This company is turning evil. Jan 22 '15 at 16:14

2 Answers2

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();
    });
});
Community
  • 1
  • 1
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
  • 1
    Thank you, at all the people who discussed this, thought together and all made enriching remarks. Thank you @Naeem Shaikh especially for the continued effort. --- Do you know perhaps how to add additional lay-out to the `.append(...)`? Since now it automatically adapts the color of the term (in this case: gray, since hovered). --- My current solution is inside the jQuery: change `` to ``, but I think a CSS solution would be easier and more centralized, allowing easy overall document-wise changes. --- Anyone? – O0123 Jan 22 '15 at 16:42
0

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.

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28
  • Looks like multiple things have the same id, isn't that a huge no no? just give it two classes, one term, one HPV or QA – Julix Oct 13 '16 at 14:04