Merge pull request #8220 from Joerg-Schoemer/feature/hide-by-display

hide tooltip by display attribute instead of opacity

Author: bewest

lib/client/browser-utils.js

@@ -15,7 +15,7 @@ function init ($) {
   $.fn.tooltip.defaults = {
     fade: true
     , gravity: 'n'
-    , opacity: 0.75
+    , opacity: 0.9
   };
 
   $('#drawerToggle').click(function(event) {

lib/client/index.js

@@ -192,7 +192,7 @@ client.load = function load (serverSettings, callback) {
 
   client.tooltip = d3.select('body').append('div')
     .attr('class', 'tooltip')
-    .style('opacity', 0);
+    .style('display', 'none');
 
   client.settings = browserSettings(client, serverSettings, $);
 

lib/client/renderer.js

@@ -54,7 +54,7 @@ function init (client, d3) {
   }
 
   function hideTooltip () {
-    client.tooltip.style('opacity', 0);
+    client.tooltip.style('display', 'none');
   }
 
   // get the desired opacity for context chart based on the brush extent
@@ -147,7 +147,7 @@ function init (client, d3) {
 
       var rawbgInfo = getRawbgInfo();
 
-      client.tooltip.style('opacity', .9);
+      client.tooltip.style('display', 'block');
       client.tooltip.html('<strong>' + translate('BG') + ':</strong> ' + client.sbx.scaleEntry(d) +
           (d.type === 'mbg' ? '<br/><strong>' + translate('Device') + ': </strong>' + d.device : '') +
           (d.type === 'forecast' && d.forecastType ? '<br/><strong>' + translate('Forecast Type') + ': </strong>' + d.forecastType : '') +
@@ -338,7 +338,7 @@ function init (client, d3) {
     prepareTreatCircles(treatCircles.enter().append('circle'))
       .attr('class', 'treatment-dot')
       .on('mouseover', function(d) {
-        client.tooltip.style('opacity', .9);
+        client.tooltip.style('display', 'block');
         client.tooltip.html(d.isAnnouncement ? announcementTooltip(d) : treatmentTooltip(d))
           .style('left', tooltipLeft())
           .style('top', (d3.event.pageY + 15) + 'px');
@@ -435,7 +435,7 @@ function init (client, d3) {
       .attr('class', 'g-duration')
       .attr('transform', rectTranslate)
       .on('mouseover', function(d) {
-        client.tooltip.style('opacity', .9);
+        client.tooltip.style('display', 'block');
         client.tooltip.html(d.isAnnouncement ? announcementTooltip(d) : treatmentTooltip(d))
           .style('left', tooltipLeft())
           .style('top', (d3.event.pageY + 15) + 'px');
@@ -640,7 +640,7 @@ function init (client, d3) {
         glucose = Math.round(glucose * decimals) / decimals;
       }
 
-      client.tooltip.style('opacity', .9);
+      client.tooltip.style('display', 'block');
       client.tooltip.html('<strong>' + translate('Time') + ':</strong> ' + client.formatTime(getOrAddDate(treatment)) + '<br/>' + '<strong>' + translate('Treatment type') + ':</strong> ' + translate(client.careportal.resolveEventName(treatment.eventType)) + '<br/>' +
           (treatment.carbs ? '<strong>' + translate('Carbs') + ':</strong> ' + treatment.carbs + '<br/>' : '') +
           (treatment.protein ? '<strong>' + translate('Protein') + ':</strong> ' + treatment.protein + '<br/>' : '') +
@@ -667,7 +667,7 @@ function init (client, d3) {
         //console.log(treatment);
         var windowWidth = $(client.tooltip.node()).parent().parent().width();
         var left = d3.event.x + TOOLTIP_WIDTH < windowWidth ? d3.event.x : windowWidth - TOOLTIP_WIDTH - 10;
-        client.tooltip.style('opacity', .9)
+        client.tooltip.style('display', 'block')
           .style('left', left + 'px')
           .style('top', (d3.event.pageY ? d3.event.pageY + 15 : 40) + 'px');
 
@@ -760,7 +760,7 @@ function init (client, d3) {
       })
       .on('drag', function() {
         //console.log(d3.event);
-        client.tooltip.style('opacity', .9);
+        client.tooltip.style('display', 'block');
         var x = Math.min(Math.max(0, d3.event.x), chart().charts.attr('width'));
         var y = Math.min(Math.max(0, d3.event.y), chart().focusHeight);
 
@@ -1266,7 +1266,7 @@ function init (client, d3) {
       })
       .text(generateText)
       .on('mouseover', function(d) {
-        client.tooltip.style('opacity', .9);
+        client.tooltip.style('display', 'block');
         client.tooltip.html(profileTooltip(d))
           .style('left', (d3.event.pageX) + 'px')
           .style('top', (d3.event.pageY + 15) + 'px');

lib/plugins/pluginbase.js

@@ -84,7 +84,7 @@ function init (majorPills, minorPills, statusPills, bgStatus, tooltip) {
       }).join('<br/>\n');
 
       pill.mouseover(function pillMouseover (event) {
-        tooltip.style('opacity', .9);
+        tooltip.style('display', 'block');
 
         var windowWidth = $(tooltip.node()).parent().parent().width();
         var left = event.pageX + TOOLTIP_WIDTH < windowWidth ? event.pageX : windowWidth - TOOLTIP_WIDTH - 10;
@@ -94,7 +94,7 @@ function init (majorPills, minorPills, statusPills, bgStatus, tooltip) {
       });
 
       pill.mouseout(function pillMouseout ( ) {
-        tooltip.style('opacity', 0);
+        tooltip.style('display', 'none');
       });
     } else {
       pill.off('mouseover');

lib/report_plugins/daytoday.js

@@ -302,7 +302,7 @@ daytoday.report = function report_daytoday (datastorage, sorteddaystoshow, optio
         })
         .on('mouseover', function(d) {
           if (options.openAps && d.openaps) {
-            client.tooltip.style('opacity', .9);
+            client.tooltip.style('display', 'block');
             var text = '<b>BG:</b> ' + d.openaps.suggested.bg +
               ', ' + d.openaps.suggested.reason +
               (d.openaps.suggested.mealAssist ? ' <b>Meal Assist:</b> ' + d.openaps.suggested.mealAssist : '');
@@ -1109,6 +1109,6 @@ daytoday.report = function report_daytoday (datastorage, sorteddaystoshow, optio
   }
 
   function hideTooltip () {
-    client.tooltip.style('opacity', 0);
+    client.tooltip.style('display', 'none');
   }
 };

lib/report_plugins/weektoweek.js

@@ -317,7 +317,7 @@ function init (ctx) {
     }
 
     function hideTooltip () {
-      client.tooltip.style('opacity', 0);
+      client.tooltip.style('display', 'none');
     }
   };
   return weektoweek;