Fix styling for cal event tooltip in calendar

calendar/js/app.js

@@ -254,6 +254,10 @@ app.classes.calendar = AppJS.extend(
 					},
 					track:true,
 
+					open: function(event,ui){
+						ui.tooltip.removeClass("ui-tooltip");
+						ui.tooltip.addClass("calendar_uitooltip");
+					}
 				});
 				ttp.tooltip("enable");
 			},

calendar/templates/default/app.css

@@ -30,6 +30,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 
 */
 
+/* custom ui-tooltip style for calendar
+*/
+.calendar_uitooltip {
+	padding: 0px;
+	position: absolute;
+	border: none;
+	max-height: 400px;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px;
+	-moz-box-shadow: 0 0 5px;
+	box-shadow: 0 0 5px;
+}
+
 .calendar_size120b { font-size: 120%; font-weight: bold; }
 
 /* marks a day in the colum-header as today

calendar/templates/pixelegg/app.css

@@ -479,6 +479,21 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 +.              .#.*                  * *                  *. .*+----------------------------------+*.
 
 */
+
+/* custom ui-tooltip style for calendar
+*/
+.calendar_uitooltip {
+	padding: 0px;
+	position: absolute;
+	border: none;
+	max-height: 400px;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px;
+	-moz-box-shadow: 0 0 5px;
+	box-shadow: 0 0 5px;
+}
+
 .calendar_size120b {
   font-size: 120%;
   font-weight: bold;

calendar/templates/pixelegg/app.less

@@ -35,7 +35,7 @@ img.sideboxstar {
 }
 
 .chzn-container {
-    max-width: 85% !important; 
+    max-width: 85% !important;
     margin-top: 0em
 }
 
@@ -63,7 +63,7 @@ img.sideboxstar {
 
 
 
-/* calender view*/ 
+/* calender view*/
 
 /*defind in layout_raster.less , because frame*/
 
@@ -90,8 +90,8 @@ div.calendar { position: relative; }
 
 .calendar{
 
-   
+
-    
+
     .button { /* "<<", "<", ">", ">>" buttons have this class */
         text-align: center;    /* They are the navigation buttons */
         padding: 2px;          /* Make the buttons seem like they're pressing */
@@ -381,22 +381,22 @@ div#calendar-edit{
     .et2_tabheader{
         background-color: transparent;
     }
-    
+
     // Size for tabs
     .et2_tabcntr {
         height: 299px;
         overflow: auto;
-        
+
             table.et2_grid {
         // Listendarstellung
         tr:nth-child(even) {background: @color-even;}
         tr:nth-child(odd) {background: @color-odd;}
     }
-        
-    }
-    
 
-    
+    }
+
+
+
 
     /*###########################################*/
     // Tab General
@@ -407,10 +407,10 @@ div#calendar-edit{
         table.et2_grid{
 
             width: 72% !important;
-            
 
-            
+
-            
+
+
             td {
                 padding: 4px;
             }
@@ -422,8 +422,8 @@ div#calendar-edit{
             // Terminsuche
 
 /*            button#calendar-edit_freetime {background-image: url('images/add.png') !important;}*/
-            
+
-            
+
             // hole day
             .et2_checkbox,
             input#calendar-edit_whole_day {margin-left: 5px important; border-left: 10px solid red;}
@@ -440,23 +440,23 @@ div#calendar-edit{
         }
 
     }
-    
+
      /*###########################################*/
-     /*Tab Beschreibung*/ 
+     /*Tab Beschreibung*/
-    
+
     /*###########################################*/
     // Teilnehmer
 
     #calendar-edit_calendar-edit-participants{
-        
+
-           tr.optional {background-color: @color-optional;} 
+           tr.optional {background-color: @color-optional;}
-        
+
           tbody{
             display: table;
             width: 100%;
 
-            
+
-            
+
             td {vertical-align: top; padding-top: 3px;}
 
 
@@ -467,7 +467,7 @@ div#calendar-edit{
                 background-size: 24px 24px;
                 .dimension_width_height_m;
                 margin-left: 1em;
-                
+
                 &:hover {.Complete_Button_Icon_hover;}
                 &active {.Complete_Button_Icon_active;}
             }
@@ -499,7 +499,7 @@ div#calendar-edit{
 
         }
     }
-    
+
     /*###########################################*/
     // Wiederholung
 
@@ -529,11 +529,11 @@ div#calendar-edit{
         tbody{
             display: table;
             width: 100%;
-            
+
             .et2_link_to {width: auto !important;}
         }
-        
+
-       span.et2_label {padding:  1em;} 
+       span.et2_label {padding:  1em;}
     }
 
     /*###########################################*/
@@ -543,7 +543,7 @@ div#calendar-edit{
         tbody{
             display: table;
             width: 100%;
-            
+
             label.et2_label {white-space: nowrap; padding: 0 5px;}
             tr.add_alarm_action {background-color: @color-optional; margin-bottom: 1em;}
         }
@@ -594,6 +594,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 
 */
 
+/* custom ui-tooltip style for calendar
+*/
+.calendar_uitooltip {
+	padding: 0px;
+	position: absolute;
+	border: none;
+	max-height: 400px;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px;
+	-moz-box-shadow: 0 0 5px;
+	box-shadow: 0 0 5px;
+}
+
 .calendar_size120b { font-size: 120%; font-weight: bold; }
 
 /* marks a day in the colum-header as today
@@ -607,9 +621,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calHoliday{
     background-color: @egw_color_3_e;
     a {
-        .color-0-gray; 
+        .color-0-gray;
         font-size: 0.9em;
-    } 
+    }
 }
 /* marks a day in the column-header additionaly as birthday of some contact,
  * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
@@ -911,33 +925,33 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calDayTodos .calendar_calDayTodosTable {
     overflow: auto;
     max-height: 400px;
-    
+
     table {
-        
+
                 // Listendarstellung
         // Reihen ohne Border left und right
         tr:nth-child(even) {background: @color-even;}
         tr:nth-child(odd) {background: @color-odd;}
-        
+
         td {
             padding: 3px;
-            
+
             img {
                 .dimension_width_height_xs;
                 .Complete_Button_Icon_normal;
-                
+
                 &:hover {.Complete_Button_Icon_hover;}
                 &:active {
-                    .Complete_Button_Icon_active; 
+                    .Complete_Button_Icon_active;
                     background-color: @color-positive-action !important;
                 }
             }
         }
-        
+
-        
+
-        
+
     }
-    
+
 }
 .calendar_calDayTodos {
     width: 250px;
@@ -1018,7 +1032,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 .calendar_plannerMonthScale {
     font-weight: bold;
-    
+
     a img {.dimension_width_height_s;}
 }
 .calendar_plannerDayScale img,.calendar_plannerWeekScale img,.calendar_plannerMonthScale img,.calendar_plannerDayOfMonthScale img {