aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcapjamesg <jamesg@jamesg.blog>2022-10-11 08:05:14 +0100
committercapjamesg <jamesg@jamesg.blog>2022-10-11 08:05:14 +0100
commite5d889ce261d1ff30efb0601d55c719e1a48dcec (patch)
treeb3f5e24bac8f36d6dcf0734e9beb0ee38bb891e9
parent38d863b3312b6a5ffb4988eb81458588d3ae3761 (diff)
downloadhovercard.js-e5d889ce261d1ff30efb0601d55c719e1a48dcec.tar.gz
hovercard.js-e5d889ce261d1ff30efb0601d55c719e1a48dcec.zip
add hovercard script
-rw-r--r--hovercard.js50
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);
+ });
+ }