diff --git a/ippisite/ippidb/static/css/targetcentric.css b/ippisite/ippidb/static/css/targetcentric.css index 1de3a6f4f436ae68db482535b9b8183b842271b1..013d9cd99095247272836a2c4c837a5f1a70ff3f 100644 --- a/ippisite/ippidb/static/css/targetcentric.css +++ b/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; +} diff --git a/ippisite/ippidb/templates/targetcentric_networks.html b/ippisite/ippidb/templates/targetcentric_networks.html index 8084a3e0e58ded23c5692bce67bb62a1c792826d..1216d11668e85770786ffa9701bc7851ca35de71 100644 --- a/ippisite/ippidb/templates/targetcentric_networks.html +++ b/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>