footnote popups

js/js.js

@@ -1,14 +1,14 @@
 (function ($, Drupal) {
 
-  Drupal.behaviors.footnote_tooltips = {
-    attach: function attach(context, settings) {
-        //js goes here
-        //$('.menu').remove();
-        var footnote_link = $("a[id^='footnote']");
-         var footnote_link = $("li[id^='footnote']");
-
-    }
-  };
+    Drupal.behaviors.footnote_popups = {
+        attach: function attach(context, settings) {
+            $.each($("li[id^='footnote']"), function(index, value) {
+                var _footnoteText_ = $(value).text();
+                var _id_ = $(this).attr("id");
+                $('a[href$="' + _id_ + '"]').attr('data-toggle', 'tooltip').attr('data-original-title', _footnoteText_).attr('title', '');
+            });
+        }
+    };
 
 
 

src/js/js.js

@@ -1,14 +1,14 @@
 (function ($, Drupal) {
 
-  Drupal.behaviors.footnote_tooltips = {
-    attach: function attach(context, settings) {
-        //js goes here
-        //$('.menu').remove();
-        var footnote_link = $("a[id^='footnote']");
-         var footnote_link = $("li[id^='footnote']");
-
-    }
-  };
+    Drupal.behaviors.footnote_popups = {
+        attach: function attach(context, settings) {
+            $.each($("li[id^='footnote']"), function(index, value) {
+                var _footnoteText_ = $(value).text();
+                var _id_ = $(this).attr("id");
+                $('a[href$="' + _id_ + '"]').attr('data-toggle', 'tooltip').attr('data-original-title', _footnoteText_).attr('title', '');
+            });
+        }
+    };
 
 
 

src/scss/_tooltips.scss

@@ -0,0 +1,26 @@
+/* popup container */
+.popup {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* popup text */
+.popup .popuptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+ 
+    /* Position the popup text - see examples below! */
+    position: absolute;
+    z-index: 1;
+}
+
+/* Show the popup text when you mouse over the popup container */
+.popup:hover .popuptext {
+    visibility: visible;
+}

src/scss/style.scss

@@ -2,6 +2,7 @@
 @import 'lp-preview-grid';
 @import 'lp-hero';
 @import 'article-pages';
+@import 'tooltips';
 
 /*on-scroll menu */
 .fixed-header-enabled.onscroll .header-container ul.menu {