Analysis refactor gui part4

qiita_pet/templates/study_ajax/artifact_file_selector.html

@@ -153,6 +153,7 @@
     // Perform the first check to all the lists, given that we may be
     // prepopulating some of them
     check_files_lists();
+    $('[data-toggle="tooltip"]').tooltip();
   });
 </script>
 <style>
@@ -180,6 +181,11 @@
   .highlightWrong {
     background: #FFAEAE;
   }
+  a.tooltip-list:link, a.tooltip-list:visited, a.tooltip-list:hover, a.tooltip-list:active {
+    text-decoration: none;
+    color: #000;
+    display: inline-block;
+  }
 </style>
 <div class="row">
   <div class="col-md-12">
@@ -201,7 +207,9 @@
     <p style="text-align: center;"><i>Available Files</i></p>
     <ul id="remaining-list" class="connectedSortable">
       {% for fp in remaining %}
-        <li id="{{fp}}" style="text-overflow:ellipsis;" title="{{fp}}">{{fp}}</li>
+        <li id="{{fp}}" style="text-overflow:ellipsis;" title="{{fp}}">
+          <a class="tooltip-list" href="#" data-toggle="tooltip" data-placement="top" title="{{fp}}">{{fp}}</a>
+        </li>
       {% end %}
     </ul>
   </div>
@@ -211,7 +219,9 @@
       <p style="text-align: center;"><i>{{ ft.replace('_', ' ') }}</i></p>
       <ul id="{{ft}}-list" data-file-required="{{req}}" data-file-count="{{num_prefixes}}" data-correct="true" class="connectedSortable checkable">
         {% for fp in files %}
-          <li id="{{fp}}">{{fp}}</li>
+          <li id="{{fp}}">
+            <a class="tooltip-list" href="#" data-toggle="tooltip" data-placement="top" title="{{fp}}">{{fp}}</a>
+          </li>
         {% end %}
       </ul>
     </div>