cytoscape-popper - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "cytoscape-popper",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A Cytoscape.js extension for Popper.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-popper.js",

README.md

@@ -145,4 +145,6 @@ cytoscape-popper
 
-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
@@ -153,4 +155,15 @@ let node = cy.nodes().first();
 
-// 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: () => {
@@ -162,7 +175,6 @@ let content = document.createElement('div');
     return content;
-  },
-  trigger: 'manual' // probably want manual mode
+  }
 });
 
-node.on('tap', () => tippy.show());
+tip.show();
 ```
@@ -169,0 +181,0 @@

No alert changes

Improved metrics

Total package byte prevSize

34955

increased by3.74%

Number of lines in readme file

205

increased by6.22%

No dependency changes