2 files changed, 46 insertions, 46 deletions

diff --git a/static/script.js b/static/script.js
index 8617159a..6cca186e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -251,15 +251,18 @@ window.onload = function () {
         }
     }
 
+    /*
     for (let popup of document.getElementsByClassName("popup")) {
         ev = parents_until(popup, {class: "event"})
         e = ev.getElementsByClassName("body")[0]
         e.onclick = new_popup;
         /* disable scroll to element in side list
            if popups are available.
-        */
+        * /
         e.parentElement.removeAttribute("href");
     }
+    */
+
 
 	document.onkeydown = function (evt) {
 		evt = evt || window.event;
@@ -269,3 +272,29 @@ window.onload = function () {
 	}
 
 }
+
+$(document).ready(function() {
+    Tipped.setDefaultSkin("purple");
+    Tipped.create(".event", {
+        /* no padding, I am the one who styles! */
+        padding: false,
+        /* Don't remove from DOM when hiding */
+        detach: false,
+
+        /* click element to toggle.
+           Elements with class "close-tooltip" also
+           acts as close buttons */
+        showOn: 'click',
+        hideOn: 'click',
+
+        /* makes popups relative our scrolling days view */
+        container: '.days',
+
+        /* Ensures that the popups stay within the given area,
+           and don't strectch the container */
+        containment: {
+            selector: '.days',
+        },
+        behaviour: 'sticky',
+    });
+});
diff --git a/static/style.css b/static/style.css
index ac490322..aad9a80c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -396,6 +396,9 @@ along with their colors.
     height: 100%;
     padding: 0;
     overflow-x: scroll;
+
+    /* allow for popup placement */
+    position: relative;
 }
 
 .events {
@@ -456,6 +459,7 @@ along with their colors.
 .event {
     transition: 0.3s;
     font-size: var(--event-font-size);
+    overflow: hidden;
 }
 
 .days .event {
@@ -464,8 +468,6 @@ along with their colors.
 
 .events .event {
     width: 100%;
-
-
 }
 
 .events .event.continuing {
@@ -581,60 +583,35 @@ along with their colors.
 .clock-22 { top: calc(100%/24 * 22); }
 .clock-24 { top: calc(100%/24 * 24); }
 
-.event-inner {
-    /* Makes the popup's "position: absolute" be relative the event.
-        unset, initial, and inherit all seem to work */
-    position: unset;
-    width: 100%;
-    height: 100%;
-}
 
 /* Popups
 ----------------------------------------
 */
 
-.event-inner .popup {
-    /* TODO & NOTE
-       If I understand it correctly this is absolute to the nearest offset parent.
-       since .event-inner has a position: unset the offset parent becomes
-       - event for week view, and
-       - body for month view.
-       This has the effect that top and left attributes become relative the offset
-       parent (even though without them the element is positioned relative to it's
-       direct event parent (except not in month view if the day is scrolled)).
-
-       I think it's something here which stops popups in the month view from going
-       of the edge of the screen. I just want the same thing to be true for the
-       week view, since it's REALY ugly when a popup makes the calendar wider.
-   */
-    position: absolute;
-    display: flex;
-    /* A scale(0%) is chosen for hiding the element for the following reasons:
-       - visibility: hidden still reserves space, which causes unwanted scroll-
-         bars since the final position of the popup is calculated at runtime
-       - Easier animation
-   */
-    transform: scale(0);
-    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-    z-index: 100;
+.popup-container {
+    display: none;
+}
+
 
+.popup {
+    display: flex;
     background-color: #dedede;
     color: black;
 
     overflow-y: auto;
-    max-width: 100ch;
+    max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
 }
 
-.event-inner .popup article {
+.popup article {
     /* makes the text in the popup scroll, but not the sidebar */
     overflow-y: auto;
-
     padding: 1em;
+    word-break: break-word;
 }
 
-.event-inner .popup .location {
+.popup .location {
     font-style: initial;
 }
 
@@ -659,14 +636,8 @@ along with their colors.
     font-size: 150%;
 }
 
-.popup.show {
-    transform: scale(1);
-}
-
-.event-inner .body {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+.tpd-tooltip a, .tpd-tooltip a:hover {
+    color: blue;
 }
 
 #bar {