Merge pull request #1322 from Ducz0r/lm-sci-2759

Fix tooltip issues [SCI-2759]

app/assets/javascripts/sitewide/tooltip_helper.js

@@ -2,10 +2,11 @@
   'use strict';
 
   $.initTooltips = function() {
-    if ($(document.body).data("tooltips-enabled") === true || $(document.body).data("tooltips-enabled") == null) {
+    var popoversArray = [];
-      var popoversArray = [];
+    var leaveTimeout;
-      var leaveTimeout;
+    var enterTimeout;
-      var enterTimeout;
+
+    if ($(document.body).data('tooltips-enabled') === true || $(document.body).data('tooltips-enabled') == null) {
       $('.tooltip_open').remove(); // Destroy all (if any) old open popovers
       $('.help_tooltips').each(function(i, obj) {
         var popoverObject = obj;
@@ -14,62 +15,73 @@
       $('.help_tooltips').each(function(i, obj) {
         var link = $(obj).data('tooltiplink');
         var textData = $(obj).data('tooltipcontent');
+        var customStyle = $(obj).data('tooltipstyle');
 
-        $(obj).popover({
+        $(obj)
-          html: true,
+          .popover({
-          container: 'body',
+            html: true,
-          placement: 'auto right',
+            container: 'body',
-          trigger: 'manual',
+            placement: 'auto right',
-          content: 'popovers will not display if empty',
+            trigger: 'manual',
-          template: '<div class="popover tooltip_' + i + '_window tooltip-open" role="tooltip" >' +
+            content: 'popovers will not display if empty',
-            '<div class="popover-body" >' + textData + '</div>' +
+            template:
-            '<br><br><br>' +
+              '<div class="popover tooltip_' + i + '_window tooltip-open" '
-            '<div class="popover-footer">' +
+              + 'role="tooltip" style="' + customStyle + '">'
-            '<a class="btn btn-link text-nowrap" href="' + link + '" target="_blank" rel="noopener noreferrer" >' +
+              + '<div class="popover-body" >' + textData + '</div>'
-            'Read more&nbsp;&nbsp;&nbsp;<i class="fas fa-external-link-alt"></i>' +
+              + '<br><br><br>'
-            '</a>' +
+              + '<div class="popover-footer">'
-            '</div>' +
+              + '<a class="btn btn-link text-nowrap" href="' + link + '" target="_blank" rel="noopener noreferrer" >'
-            '</div>'
+              + 'Read more&nbsp;&nbsp;&nbsp;<i class="fas fa-external-link-alt"></i>'
-        }).off("shown.bs.popover").on("shown.bs.popover", function() {
+              + '</a>'
-          // hide all other popovers
+              + '</div>'
-          popoversArray.forEach(function(arrayItem) {
+              + '</div>'
-            if (obj !== arrayItem) {
+          })
-              $(arrayItem).popover("hide");
+          .off('shown.bs.popover')
-            }
+          .on('shown.bs.popover', function() {
-          });
+            // hide all other popovers
-        }).off("mouseleave").on("mouseleave", function( ) {
+            popoversArray.forEach(function(arrayItem) {
-          clearTimeout(enterTimeout);
+              if (obj !== arrayItem) {
-          leaveTimeout = setTimeout(function() {
+                $(arrayItem).popover('hide');
-            if (!$(".tooltip_" + i + "_window:hover").length > 0) {
+              }
-              $(obj).popover("hide");
+            });
-            }
+          })
-          }, 100);
+          .off('mouseleave')
-        }).off("mouseenter").on("mouseenter", function() {
+          .on('mouseleave', function() {
-          clearTimeout(leaveTimeout);
+            clearTimeout(enterTimeout);
-          enterTimeout = setTimeout(function() {
+            leaveTimeout = setTimeout(function() {
-            if ($(obj).hover().length > 0) {
+              if (!$('.tooltip_' + i + '_window:hover').length > 0) {
-              $(obj).popover("show");
-              $(".tooltip_" + i + "_window").removeClass("tooltip-enter");
-              var top = $(obj).offset().top;
-              $('.tooltip_' + i + '_window').css({
-                top: (top) + 'px'
-              });
-              $(".tooltip_" + i + "_window").off("mouseleave").on("mouseleave", function() {
-                $(".tooltip_" + i + "_window").removeClass("tooltip-enter");
                 $(obj).popover('hide');
-              });
+              }
-              $(".tooltip_" + i + "_window").off("mouseenter").on("mouseenter", function() {
+            }, 100);
-                $(".tooltip_" + i + "_window").addClass("tooltip-enter");
+          })
-              });
+          .off('mouseenter')
-            }
+          .on('mouseenter', function() {
-          }, 1000);
+            clearTimeout(leaveTimeout);
-        });
+            enterTimeout = setTimeout(function() {
-      })
+              var top;
-    }
-  }
 
-  $(document).ready(function() {
+              if ($(obj).hover().length > 0) {
+                $(obj).popover('show');
+                $('.tooltip_' + i + '_window').removeClass('tooltip-enter');
+                top = $(obj).offset().top;
+                $('.tooltip_' + i + '_window').css({
+                  top: (top) + 'px'
+                });
+                $('.tooltip_' + i + '_window').off('mouseleave').on('mouseleave', function() {
+                  $('.tooltip_' + i + '_window').removeClass('tooltip-enter');
+                  $(obj).popover('hide');
+                });
+                $('.tooltip_' + i + '_window').off('mouseenter').on('mouseenter', function() {
+                  $('.tooltip_' + i + '_window').addClass('tooltip-enter');
+                });
+              }
+            }, 1000);
+          });
+      });
+    }
+  };
+
+  $(document).on('turbolinks:load', function() {
     $.initTooltips();
   });
-
 }());

app/assets/stylesheets/themes/main_navigation.scss

@@ -175,7 +175,7 @@
   }
 }
 
-.notification-settings-container {
+.preferences-settings-container {
   margin-bottom: 50px;
   margin-top: 50px;
 

app/views/canvas/_tags.html.erb

@@ -1,10 +1,12 @@
-<div class="tags-container pull-right">
+<div
+  class="tags-container pull-right help_tooltips"
+  data-tooltiplink="<%= I18n.t('tooltips.link.task.color_tag') %>"
+  data-tooltipcontent="<%= I18n.t('tooltips.text.task.color_tag') %>"
+>
   <% tags2 = my_module.tags[0..3] %>
   <% tags2.each do |tag| %>
     <div style="color: <%= tag.color %>"
-         class="<%= "last" if tag == tags2[-1] %> help_tooltips"
+         class="<%= "last" if tag == tags2[-1] %>"
-         data-tooltiplink="<%= I18n.t('tooltips.link.task.color_tag') %>"
-         data-tooltipcontent="<%= I18n.t('tooltips.text.task.color_tag') %>"
          title="<%= tag.name %>">
       <span class="fas fa-tag"></span>
     </div>

app/views/shared/_invite_users_modal.html.erb

@@ -111,12 +111,21 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
           </button>
 
           <!-- Invite buttons -->
-          <button type="button" data-role="invite-btn" class="btn btn-success" disabled="disabled" data-action="invite">
+          <button type="button" class="btn btn-success help_tooltips"
+                  data-tooltiplink="<%= I18n.t('tooltips.link.invite_to_sci') %>"
+                  data-tooltipcontent="<%= I18n.t('tooltips.text.invite_to_sci') %>"
+                  data-role="invite-btn" data-action="invite"
+                  disabled="disabled">
             <%= t('invite_users.invite_btn') %>
           </button>
 
           <div class="btn-group" data-role="invite-with-role-div">
-            <button type="button" class="btn btn-success dropdown-toggle help_tooltips" data-tooltiplink="<%= I18n.t('tooltips.link.invite_to_sci') %>" data-tooltipcontent="<%= I18n.t('tooltips.text.invite_to_sci') %>"  data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true" aria-expanded="false" data-role="invite-with-role-btn" disabled="disabled">
+            <button type="button" class="btn btn-success dropdown-toggle help_tooltips"
+                    data-tooltiplink="<%= I18n.t('tooltips.link.invite_to_sci') %>"
+                    data-tooltipcontent="<%= I18n.t('tooltips.text.invite_to_sci') %>"
+                    data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true"
+                    aria-expanded="false" data-role="invite-with-role-btn"
+                    disabled="disabled">
               <%= t('invite_users.invite_btn') %>
               &nbsp;
               <span class="caret"></span>

app/views/users/settings/account/preferences/index.html.erb

@@ -54,7 +54,7 @@
                      url: update_togglable_settings_path(format: :json),
                      html: { method: :post, id: 'togglable-settings-panel' },
                      remote: true) do |f| %>
-          <div class="notification-settings-container">
+          <div class="preferences-settings-container">
             <h4><%= t('notifications.title') %></h4>
             <div class="row">
               <div class="col-sm-2">
@@ -135,7 +135,7 @@
             </div>
           </div>
           <hr>
-          <div class="tooltips-settings-container">
+          <div class="preferences-settings-container">
             <h4><%= t('users.settings.account.preferences.edit.tips.title') %></h4>
             <div class="row">
               <div class="col-sm-2">

config/locales/en.yml

@@ -391,7 +391,7 @@ en:
             step_tab: "Step content"
             results_tab: "Results content"
           step_contents_inner:
-            instructions: "Choose what information from task protocol step/s to include in the report"
+            instructions: "Select the information from task protocol step/s to include in the report"
             check_all: "All protocols steps content"
             tables: "Tables"
             no_tables: "Step contains no tables"
@@ -1415,8 +1415,8 @@ en:
             time_zone_title: "Time zone"
             tips:
               title: "Help Tips"
-              text1: "When you place your mouse over specific element of SciNote, we show you a tip with description of this element."
+              text1: "When you place your mouse cursor on a certain element in SciNote and hold it for a bit, a short and helpful description will appear."
-              text2: "You may want to turn that off if you feel confident in here."
+              text2: "If you feel confident in SciNote already, you can turn off these Help Tips."
               toggle: "Show Help Tips"
           update_flash: "Preferences successfully updated."
         addons: