diff options
author | capjamesg <jamesg@jamesg.blog> | 2022-10-11 08:05:14 +0100 |
---|---|---|
committer | capjamesg <jamesg@jamesg.blog> | 2022-10-11 08:05:14 +0100 |
commit | e5d889ce261d1ff30efb0601d55c719e1a48dcec (patch) | |
tree | b3f5e24bac8f36d6dcf0734e9beb0ee38bb891e9 | |
parent | 38d863b3312b6a5ffb4988eb81458588d3ae3761 (diff) | |
download | hovercard.js-e5d889ce261d1ff30efb0601d55c719e1a48dcec.tar.gz hovercard.js-e5d889ce261d1ff30efb0601d55c719e1a48dcec.zip |
add hovercard script
-rw-r--r-- | hovercard.js | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/hovercard.js b/hovercard.js new file mode 100644 index 0000000..3c765c1 --- /dev/null +++ b/hovercard.js @@ -0,0 +1,50 @@ +// 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) { + if (hovercards[target_link]) { + var new_box = document.createElement("div"); + new_box.classList.add("hovercard"); + new_box.innerHTML = hovercards[target_link]; + 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); + }); + } |