Display a tooltip when an event content cannot be fully displayed.

This is intended to make it easy to have a glimpse at the content of 
an event, when its width is not sufficient for its content to be 
displayed (without overflowing its parent).
  
  It uses an external jQuery library to display tooltips: named _tipso_ 
(https://github.com/object505/tipso).

event/static/css/tipso.css

@@ -0,0 +1,108 @@
+/* Tipso Bubble Styles */
+.tipso_bubble, .tipso_bubble > .tipso_arrow{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing:    border-box;
+	box-sizing:         border-box;
+}
+.tipso_bubble {
+  position: absolute;
+	text-align: center;
+	border-radius: 6px;
+	z-index: 9999;
+}
+.tipso_style{
+	/* cursor: help; */
+	border-bottom: 1px dotted;
+}
+.tipso_title {
+  padding: 3px 0;
+	border-radius: 6px 6px 0 0;
+  font-weight: 700;
+}
+.tipso_content {
+  word-wrap: break-word;
+	padding: 0.5em;
+}
+
+/* Tipso Bubble size classes - Similar to Foundation's syntax*/
+.tipso_bubble.tiny {
+	font-size: 0.6rem;
+}
+.tipso_bubble.small {
+	font-size: 0.8rem;
+}
+.tipso_bubble.default {
+	font-size: 1rem;
+}
+.tipso_bubble.large {
+	font-size: 1.2rem;
+	width: 100%;
+}
+
+.tipso_bubble.cal_small {
+  font-size: 1.6rem;
+}
+
+/* Tipso Bubble Div */
+.tipso_bubble > .tipso_arrow{
+	position: absolute;
+	width: 0; height: 0;
+	border: 8px solid;
+	pointer-events: none;
+}
+.tipso_bubble.top > .tipso_arrow {
+	border-top-color: #000;
+	border-right-color: transparent;
+	border-left-color: transparent;
+	border-bottom-color: transparent;
+	top: 100%;
+	left: 50%;
+	margin-left: -8px;
+}
+.tipso_bubble.bottom > .tipso_arrow {
+	border-bottom-color: #000;
+	border-right-color: transparent;
+	border-left-color: transparent;
+	border-top-color: transparent;
+	bottom: 100%;
+	left: 50%;
+	margin-left: -8px;
+}
+.tipso_bubble.left > .tipso_arrow {
+	border-left-color: #000;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-right-color: transparent;
+	top: 50%;
+	left: 100%;
+	margin-top: -8px;
+}
+.tipso_bubble.right > .tipso_arrow {
+	border-right-color: #000;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	top: 50%;
+	right: 100%;
+	margin-top: -8px;
+}
+
+.tipso_bubble .top_right_corner,
+.tipso_bubble.top_right_corner {
+	border-bottom-left-radius: 0;
+}
+
+.tipso_bubble .bottom_right_corner,
+.tipso_bubble.bottom_right_corner  {
+	border-top-left-radius: 0;
+}
+
+.tipso_bubble .top_left_corner,
+.tipso_bubble.top_left_corner {
+	border-bottom-right-radius: 0;
+}
+
+.tipso_bubble .bottom_left_corner,
+.tipso_bubble.bottom_left_corner  {
+	border-top-right-radius: 0;
+}

event/static/js/calendar.js

@@ -68,6 +68,8 @@ class Calendar {
 
     this.sortEventNodesByEndTimeAndLocation();
     this.updateCalendarNodeHeight();
+
+    this.initEventOverflowTooltips();
   }
 
 
@@ -81,6 +83,8 @@ class Calendar {
     this.updateTimeSlots();
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
+
+    this.startShowingEventOverflowTooltips();
   }
 
   setEndDate (newEndDate) {
@@ -91,6 +95,8 @@ class Calendar {
     this.updateTimeSlots();
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
+
+    this.startShowingEventOverflowTooltips();
   }
 
   updateHoursToDisplay () {
@@ -337,6 +343,18 @@ class Calendar {
 
     this.eventContainerNode.appendTo(this.containerNode);
   }
+
+
+  // Event overflow tooltip (using tipso library)
+
+  initEventOverflowTooltips () {
+    $(".cal-has-tooltip").tipso({
+      speed: 0,
+      delay: 50,
+      size: "cal_small",
+      background: "#000"
+    });
+  }
 }
 
 
@@ -393,6 +411,7 @@ class Event {
     this.parseAndSetTags();
 
     this.addPermCounter();
+    this.updateOverflowTooltipContent();
 
     this.createDetails();
 
@@ -622,11 +641,42 @@ class Event {
 
       this.updateNodeStyle();
       this.updatePositionInGrid();
+      this.updateOverflowTooltipTriggering();
       this.startDisplayingDetailsPopupOnClick();
 
       this.displayed = true;
     }
   }
+
+
+  // Overflow tooltip (using tipso library)
+
+  updateOverflowTooltipContent () {
+    this.node.attr("data-tipso-titleContent",
+                   this.name);
+    this.node.attr("data-tipso-content", this.location);
+
+    // if (this.hasPerms) {
+    //   this.node.attr("data-tipso-content",
+    //                  `${this.location}<br>(${this.nbPerms}/${this.maxNbPerms} en permanence)`);
+    // }
+    // else {
+    //   this.node.attr("data-tipso-content", this.location);
+    // }
+  }
+
+  updateOverflowTooltipTriggering () {
+    let eventNameElement = this.node.find(".cal-event-name")[0];
+    let eventLocationElement = this.node.find(".cal-event-location")[0];
+
+    if (eventNameElement.clientWidth < eventNameElement.scrollWidth
+    ||  eventLocationElement.clientWidth < eventLocationElement.scrollWidth) {
+        this.node.addClass("cal-has-tooltip");
+    }
+    else {
+      this.node.removeClass("cal-has-tooltip");
+    }
+  }
 }
 
 
@@ -860,6 +910,7 @@ class EventDetails {
           this.updatePermManagementArea();
           event.updatePermCounter();
           event.updateNodeStyle();
+          event.updateOverflowTooltipContent();
         },
 
         error: () => {

event/templates/event/calendar.html

@@ -3,11 +3,13 @@
 
 {% block extra_css %}
     {{ block.super }}
+    <link rel="stylesheet" href="{% static "css/tipso.css" %}">
     <link rel="stylesheet" href="{% static "css/calendar.css" %}">
 {% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
+    <script type="text/javascript" src="{% static "js/tipso.min.js" %}"></script>
     <script type="text/javascript" src="{% static "js/calendar.js" %}"></script>
 
     <script type="text/javascript">