help section

ippisite/ippidb/static/css/targetcentric.css

@@ -165,4 +165,32 @@ Description: IPPI-DB targetcentric Theme
 
 .dropdown:hover .dropdown-content {display: block;}
 
-.dropdown:hover .dropbtn {background-color: #ddd;}
\ No newline at end of file
+.dropdown:hover .dropbtn {background-color: #ddd;}
+
+a.infobulle{
+  color:#ccc;               
+}
+
+a.infobulle:hover, a.infobulle:focus{
+  color:#17a2b8;
+}
+
+a.infobulle span{
+  position:absolute;
+  color:white;                
+  margin-top:23px;
+  margin-left:0px;
+  background:rgba(0,0,0,.9);
+  padding:15px;
+  border-radius:3px;
+  box-shadow:0 0 2px rgba(0,0,0,.5);
+  transform:scale(0) rotate(-12deg);
+  transition:all .25s;
+  opacity:0;
+  z-index: 3;
+}
+
+a.infobulle:hover span, a.infobulle:focus span{
+  transform:scale(1) rotate(0);
+  opacity:1;
+}

ippisite/ippidb/templates/targetcentric_networks.html

@@ -17,8 +17,9 @@
         </div>
     </nav>
     <div class="card">
+      
       <div class="input-group">
-        <div class="btn-group mr-3">
+        <div class="btn-group">
           <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Select a threshold (multiplied by standard deviation)
           </button>
@@ -28,6 +29,17 @@
             {% endfor %}
           </div>
           </div>
+          <p>
+            <a class="infobulle" href='#'>
+              <i class="fas fa-question-circle fa-2x m-1 mt-3"></i>
+              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ornare hendrerit. 
+                Phasellus urna neque, vehicula in eleifend ut, aliquam quis nunc. Nam dapibus lobortis nulla id faucibus. 
+                Morbi rhoncus libero at lectus iaculis sagittis. Phasellus egestas enim odio, porta lobortis neque sodales 
+                vitae. Fusce molestie posuere ultricies. Sed interdum ipsum vel metus condimentum, ac vehicula enim molestie. 
+                Nunc pharetra tortor ullamcorper lacinia viverra. Pellentesque in tempor mauris. Integer convallis urna a 
+                ligula ultricies venenatis. Duis ut congue magna. </span>
+            </a>
+          </p>
           <input id="id_search" name="search" class="form-control" type="text" placeholder="Cavity" aria-label="Search">
           <div class="input-group-append">
               <button type="button" class="btn btn-outline-secondary search-button"><i class="fas fa-search"></i></button>