configurable tooltip in tree controls, WIP #167

edamontology · May 6, 2021 · 3ab74db · 3ab74db
1 parent 360c0b0
commit 3ab74db
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/css/index.css b/css/index.css
@@ -171,6 +171,20 @@ a:before {
 .tree-controls .tree-control-element a:hover {
     color: #5c9ad1;
 }
+.tree-control-element input[type="checkbox"]{
+    display:none;
+}
+.tree-control-element input[type="checkbox"]:checked+span:before{
+    content: "\f205";
+}
+.tree-control-element input[type="checkbox"]+span:before{
+    content: "\f204";
+    font-family: 'Font Awesome 5 Free';
+}
+.tree-control-element label{
+    cursor: pointer;
+    margin-bottom:0;
+}
 body {
   overflow-x: hidden;
 }

diff --git a/index.html b/index.html
@@ -182,6 +182,28 @@ <h1 id="pageTitle">EDAM ontology</h1>
                     onclick="toggleFullscreen();" ><i class="fas fa-compress" aria-hidden="true"></i><span class="on-controls-hover" >Exit Full Screen</span>
                     </button>
                     </div>
+                    <div class="tree-controls-group">
+                        <div>
+                            <div class="tree-control-element text-left">
+                                <i class="fas fa-cogs"></i><span class="on-controls-hover p-0"><b> Settings</b><br/></span>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-tooltip-only-full-screen" checked="checked"/>
+                                    <span></span>
+                                    <span title="Always show tooltips otherwise">Show tooltips only in full screen</span><br/>
+                                </label>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-detail" checked="checked"/>
+                                    <span></span>
+                                    Show details in tooltip<br/>
+                                </label>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-community-usage"/>
+                                    <span></span>
+                                    Show community usage in tooltip<br/>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="tree-controls tree-controls-right-bottom">
                     <div class="tree-control-element meta-info">