hovercard.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// comment out this variable to add your own hovercards
// var hovercards = {
//     "https://www.w3.org/community/sustyweb/": {"title": "Sustainable Web Design Community Group", "A community group dedicated to creating sustainable websites. This group will not publish specifications." }
//   };
  
  var article = document.getElementsByTagName("article");

  if (article) {
    article = article[0];
  }

  function hover (target_link) {
    var hovercard_data = hovercards[target_link.href.replace(/\/+$/, "")];
    if (hovercard_data) {
      var new_box = document.createElement("div");
      new_box.classList.add("hovercard");
      new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong><p>" + hovercard_data["description"] + "</p>";
      new_box.style.top = window.scrollY + target_link.getBoundingClientRect().top + "px";
      new_box.style.left = window.scrollX + target_link.getBoundingClientRect().left + "px";
      new_box.id = "tooltip";
      document.body.appendChild(new_box);
    }
  }

  function unhover (target_link) {
    var active_hovercard = document.getElementById("tooltip");

    if (active_hovercard) {
      active_hovercard.parentNode.removeChild(active_hovercard);
    }
  }

  var links = article.getElementsByTagName("a");

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("mouseover", function() {
      hover(this);
    });
    links[i].addEventListener("mouseout", function() {
      unhover(this);
    });
    // these handlers are so that the hovercard will appear/disappear
    // with keyboard actions
    links[i].addEventListener("onfocus", function() {
      hover(this);
    });
    links[i].addEventListener("onfocusout", function() {
      unhover(this);
    });
  }