Add button tooltips & compound link #3303

documentation/demos/fcose-gene/code.js

@@ -91,15 +91,17 @@ Promise.all([
         layoutOpts: {
           randomize: true,
           animate: true
-        }
+        },
+        tooltip: 'Randomise'
       },
 
       {
         label: h('span', { 'class': 'fa fa-play' }, []),
         layoutOpts: {
           randomize: false,
           animate: true
-        }
+        },
+        tooltip: 'Step'
       }
     ];
 
@@ -150,7 +152,7 @@ Promise.all([
     }
 
     function makeButton( opts ){
-      var $button = h('button', { 'class': 'btn btn-default' }, [ opts.label ]);
+      var $button = h('button', { 'class': 'btn btn-default', title: opts.tooltip }, [ opts.label ]);
 
       $btnParam.appendChild( $button );
 
@@ -160,6 +162,12 @@ Promise.all([
         layout = makeLayout( opts.layoutOpts );
         layout.run();
       });
+
+      return tippy( $button, {
+        content: opts.tooltip,
+        arrow: true,
+        placement: 'right'
+      } );
     }
 
     var makeTippy = function(node, html){

documentation/demos/fcose-gene/index.html

@@ -46,6 +46,9 @@
           Visualisation by <a href="http://js.cytoscape.org">Cytoscape.js</a><br/>
           Layout by <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-fcose">FCOSE</a>
         </p>
+        <p>
+          Note that FCOSE supports both non-compound and compound graphs.  For a compound graph, see <a href="https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo/demo-compound.html">another FCOSE demo</a>.
+        </p>
       </div>
 
     </div>