Update the demos and the readme re. tippy@5

Previously the documentation and demos had examples of tippy@4, which is now out-of-date.

README.md

@@ -142,26 +142,38 @@ cy.on('pan zoom resize', update);
 
 ### Usage with Tippy.js
 
-This extension can also be used to enable [Tippy.js](https://atomiks.github.io/tippyjs/) tooltip functionality with Cytoscape, by simply passing the `popperRef` object into Tippy.
+This extension can also be used to enable [Tippy.js](https://atomiks.github.io/tippyjs/) tooltip functionality with Cytoscape.
+
+N.B. the creation of many `Tippy` instances at once has performance implications, especially for large graphs.  Create each instance on demand, e.g. on `tap`.  Use [`destroy()`](https://atomiks.github.io/tippyjs/methods/#destroy) instead of `hide()` where possible.
 
 ```js
 let node = cy.nodes().first();
 
 let ref = node.popperRef(); // used only for positioning
 
-// using tippy ^4.0.0
-let tippy = new Tippy(ref, { // tippy options:
+// unfortunately, a dummy element must be passed as tippy only accepts a dom element as the target
+// https://github.com/atomiks/tippyjs/issues/661
+let dummyDomEle = document.createElement('div');
+
+// using tippy@^5.1.3
+let tip = new Tippy(dummyDomEle, { // tippy options:
+  // mandatory:
+  trigger: 'manual', // call show() and hide() yourself
+  lazy: false, // needed for onCreate()
+  onCreate: instance => { instance.popperInstance.reference = ref; }, // needed for `ref` positioning
+
+  // your custom options follow:
+
   content: () => {
     let content = document.createElement('div');
 
     content.innerHTML = 'Tippy content';
 
     return content;
-  },
-  trigger: 'manual' // probably want manual mode
+  }
 });
 
-node.on('tap', () => tippy.show());
+tip.show();
 ```
 
 Refer to [Tippy.js](https://atomiks.github.io/tippyjs) documentation for more details.

demo-tippy.html

@@ -11,11 +11,11 @@
 	<!-- for testing with local version of cytoscape.js -->
 	<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
 
-  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
+  <script src="https://unpkg.com/popper.js@1.16.0/dist/umd/popper.js"></script>
 	<script src="cytoscape-popper.js"></script>
 
-	<script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
-	<link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
+	<script src="https://unpkg.com/tippy.js@5.1.3/dist/tippy-bundle.iife.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/tippy.js@5.1.3/dist/tippy.css" />
 
 	<style>
 		body {
@@ -87,21 +87,40 @@
 			var ab = cy.getElementById('ab');
 
 			var makeTippy = function(node, text){
-				return tippy( node.popperRef(), {
-					content: function(){
+				var ref = node.popperRef();
+
+				// unfortunately, a dummy element must be passed
+				// as tippy only accepts a dom element as the target
+				// https://github.com/atomiks/tippyjs/issues/661
+				var dummyDomEle = document.createElement('div');
+
+				var tip = tippy( dummyDomEle, {
+					onCreate: function(instance){ // mandatory
+						// patch the tippy's popper reference so positioning works
+						// https://atomiks.github.io/tippyjs/misc/#custom-position
+						instance.popperInstance.reference = ref;
+					},
+					lazy: false, // mandatory
+					trigger: 'manual', // mandatory
+
+					// dom element inside the tippy:
+					content: function(){ // function can be better for performance
 						var div = document.createElement('div');
 
 						div.innerHTML = text;
 
 						return div;
 					},
-					trigger: 'manual',
+
+					// your own preferences:
 					arrow: true,
 					placement: 'bottom',
 					hideOnClick: false,
 					multiple: true,
 					sticky: true
 				} );
+
+				return tip;
 			};
 
 			var tippyA = makeTippy(a, 'foo');

demo.html

@@ -11,7 +11,7 @@
 	<!-- for testing with local version of cytoscape.js -->
 	<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
 
-  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
+  <script src="https://unpkg.com/popper.js@1.16.0/dist/umd/popper.js"></script>
 	<script src="cytoscape-popper.js"></script>
 
 	<style>