Rename duplicated JS function toggleTooltip

A JS function named toggleTooltip already existed in another JS file.
So the function is renamed to toggleCollapsibleTooltip and the classes
are renamed accordingly.

src/api/app/assets/javascripts/webui/new_watchlist/collapsible_tooltip.js

@@ -1,15 +1,15 @@
-function toggleTooltip() { // jshint ignore:line
-  $('.toggle-tooltip').on('click', function(){
+function toggleCollapsibleTooltip() { // jshint ignore:line
+  $('.collapsible-tooltip').on('click', function(){
     var replaceTitle = $(this).attr('title') === 'Click to keep it open' ? 'Click to close it' : 'Click to keep it open';
-    var infoContainer = $(this).parents('.toggle-tooltip-parent').next();
+    var infoContainer = $(this).parents('.collapsible-tooltip-parent').next();
     $(infoContainer).toggleClass('collapsed');
     $(infoContainer).removeClass('hover');
     $(this).attr('title', replaceTitle);
   });
-  $('.toggle-tooltip').on('mouseover', function(){
-    $(this).parents('.toggle-tooltip-parent').next().addClass('hover');
+  $('.collapsible-tooltip').on('mouseover', function(){
+    $(this).parents('.collapsible-tooltip-parent').next().addClass('hover');
   });
-  $('.toggle-tooltip').on('mouseout', function(){
-    $(this).parents('.toggle-tooltip-parent').next().removeClass('hover');
+  $('.collapsible-tooltip').on('mouseout', function(){
+    $(this).parents('.collapsible-tooltip-parent').next().removeClass('hover');
   });
 }

src/api/app/assets/stylesheets/webui/new_watchlist/watchlist.scss

@@ -7,8 +7,8 @@ body.new-watchlist {
   // TODO: the following rules are mostly duplicated from build-results.scss.
   // Please try to unify both when new_watchlist feature is rolled out.
 
-  .toggle-tooltip { cursor: pointer; }
-  .toggle-tooltip-parent { z-index: 2; }
+  .collapsible-tooltip { cursor: pointer; }
+  .collapsible-tooltip-parent { z-index: 2; }
 
   .extended-info {
     @extend .d-flex;

src/api/app/components/watched_items_list_component.html.haml

@@ -11,11 +11,11 @@
           %i.fas.fa-cubes.mr-1
           #{item}
       - when 'BsRequest'
-        .d-flex.flex-row.flex-wrap.align-items-baseline.toggle-tooltip-parent
+        .d-flex.flex-row.flex-wrap.align-items-baseline.collapsible-tooltip-parent
           = link_to(request_show_path(item.number), class: 'text-word-break-all') do
             = image_tag('icons/request-icon.svg', height: 18, class: 'mr-1 color-inverted')
             = "##{item.number} #{helpers.request_type_of_action(item)}"
-          %i.fa.fa-question-circle.text-light.px-2.toggle-tooltip{ title: 'Click to keep it open' }
+          %i.fa.fa-question-circle.text-light.px-2.collapsible-tooltip{ title: 'Click to keep it open' }
         .extended-info.mt-2.mb-3.collapsed
           .triangle.left
           .extended-info-content

src/api/app/components/watchlist_component.html.haml

@@ -19,3 +19,6 @@
     = render WatchedItemsListComponent.new(items: projects, class_name: 'Project')
     = render WatchedItemsListComponent.new(items: packages, class_name: 'Package')
     = render WatchedItemsListComponent.new(items: bs_requests, class_name: 'BsRequest')
+
+:javascript
+  toggleCollapsibleTooltip();

src/api/app/views/webui/package/_buildstatus.html.haml

@@ -63,5 +63,5 @@
       %strong excluded/disabled
 
 :javascript
-  // TODO: call toggleTooltip() as soon as the new_watchlist fature is rolled out. Changing the classes in the view is also needed.
+  // TODO: call toggleCollapsibleTooltip() as soon as the new_watchlist fature is rolled out. Changing the classes in the view is also needed.
   toggleBuildInfo();