.travis.yml

@@ -3,7 +3,7 @@ cache:
   directories:
     - node_modules
 node_js:
-  - 11
+  - 12
 notifications:
   email:
     recipients:

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.2.11](https://github.com/wwayne/react-tooltip/compare/v4.2.10...v4.2.11) (2020-11-22)
+
+
+### Bug Fixes
+
+* **styles:** add styles for shadow dom ([00d1539](https://github.com/wwayne/react-tooltip/commit/00d1539)), closes [#597](https://github.com/wwayne/react-tooltip/issues/597)
+
 ## [4.2.10](https://github.com/wwayne/react-tooltip/compare/v4.2.9...v4.2.10) (2020-09-14)
 
 

README.md

@@ -1,7 +1,7 @@
 # react-tooltip
 
 [![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
-[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 [![npm download][download-image]][download-url]
 [![Build Status](https://travis-ci.org/wwayne/react-tooltip.svg?branch=master)](https://travis-ci.org/wwayne/react-tooltip)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -39,7 +39,7 @@ yarn add react-tooltip
 
 ## Usage
 
-**Using NPM**
+### Using NPM
 
 1 . Require react-tooltip after installation
 
@@ -55,11 +55,11 @@ import ReactTooltip from 'react-tooltip';
 
 3 . Include react-tooltip component
 
-```js
+```jsx
 <ReactTooltip />
 ```
 
-**Standalone**
+### Standalone
 
 You can import `node_modules/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
 
@@ -105,9 +105,9 @@ Notes:
 
 ### Security Note
 
-The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html-react](https://www.npmjs.com/package/sanitize-html-react). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
+The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
 
-##### Note:
+#### Note
 
 1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
 2. **data-for** corresponds to the **id** of `<ReactTooltip />`
@@ -119,7 +119,7 @@ The `html` option allows a tooltip to directly display raw HTML. This is a secur
 
 > Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
 
-```js
+```jsx
 import ReactTooltip from 'react-tooltip'
 
 <p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -135,7 +135,7 @@ import ReactTooltip from 'react-tooltip'
 
 > Show specific tooltip manually, for example:
 
-```js
+```jsx
 import ReactTooltip from 'react-tooltip'
 
 <p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -172,6 +172,46 @@ Same for empty children, if you don't want show the tooltip when the children is
 <ReactTooltip id='test'>{}</ReactTooltip>
 ```
 
+### 3. Tooltip not binding to dynamic content
+
+When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes 
+on new dynamic content, the tooltip will not register its event listener.  
+
+For example, you render a generic tooltip in the root of your app, then load a list of content async.
+Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
+Since the tooltip has already scanned for data-tip these new elements will not trigger.
+
+One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again, 
+to allow event wireup.
+
+#### Example
+
+```jsx
+<app>
+  <ReactTooltip id="foo" />
+  <list/>
+</app>
+```
+
+```jsx
+
+const dynamicList = (props) => {
+
+ useEffect(() => {
+        ReactTooltip.rebuild();
+    });
+
+return(
+  <list>
+    {data.map((item)=> {
+      <span data-for="foo">My late bound tooltip triggered data</span>
+    });}
+  </list>
+);
+};
+
+```
+
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "4.2.10",
+  "version": "4.2.11",
   "description": "react tooltip component",
   "main": "dist/index.js",
   "types": "dist/react-tooltip.d.ts",
@@ -14,7 +14,7 @@
     "eslint:fix": "./node_modules/.bin/eslint . --ignore-path ./.eslintignore --fix",
     "pretty:quick": "./node_modules/.bin/pretty-quick --staged",
     "lint:staged": "./node_modules/.bin/lint-staged",
-    "test:unit": "mocha --require @babel/register --require ignore-styles 'test/*.spec.js'",
+    "test:unit": "mocha --require @babel/register --require ignore-styles test/*.spec.js",
     "clean": "rimraf dist",
     "build:rollup": "rollup -c",
     "build": "npm-run-all clean copy:types build:rollup",
@@ -78,14 +78,14 @@
     "@semantic-release/npm": "^7.0.5",
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@svgr/rollup": "^4.3.3",
-    "@testing-library/react": "^9.4.0",
+    "@testing-library/react": "^11.0.4",
     "babel-eslint": "^4.1.1",
     "babel-loader": "v8.0.0-beta.0",
     "babelify": "^9.0.0",
     "browserify": "^13.0.0",
     "browserify-shim": "^3.8.12",
-    "chai": "^3.5.0",
-    "chai-enzyme": "^0.5.0",
+    "chai": "^4.2.0",
+    "chai-enzyme": "^1.0.0-beta.1",
     "chai-spies": "^1.0.0",
     "commitizen": "2.9.6",
     "concurrently": "^2.1.0",
@@ -109,9 +109,9 @@
     "http-server": "^0.11.1",
     "husky": "^3.1.0",
     "ignore-styles": "5.0.1",
-    "jsdom": "^9.2.1",
+    "jsdom": "^16.4.0",
     "lint-staged": "^10.2.7",
-    "mocha": "^5.2.0",
+    "mocha": "^8.1.3",
     "mocha-each": "^2.0.1",
     "mocha-jsdom": "^2.0.0",
     "node-sass": "^4.13.1",

rollup.config.js

@@ -43,7 +43,7 @@ export default {
       plugins: [simplevars(), nested()],
       modules: true
     }),
-    sass({ insert: true }),
+    sass({ insert: false }),
     url(),
     svgr(),
     babel({

src/index.js

@@ -19,7 +19,7 @@ import nodeListToArray from './utils/nodeListToArray';
 import { generateUUID } from './utils/uuid';
 
 /* CSS */
-import './index.scss';
+import baseCss from './index.scss';
 import { generateTooltipStyle } from './decorators/styler';
 
 @staticMethods
@@ -146,6 +146,7 @@ class ReactTooltip extends React.Component {
 
     this.bindListener(); // Bind listener for tooltip
     this.bindWindowEvents(resizeHide); // Bind global event for static method
+    this.injectStyles(); // Inject styles for each DOM root having tooltip.
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -173,6 +174,34 @@ class ReactTooltip extends React.Component {
     this.unbindWindowEvents();
   }
 
+  /* Look for the closest DOM root having tooltip and inject styles. */
+  injectStyles() {
+    const { id } = this.props;
+    const targetArray = this.getTargetArray(id);
+    const domRoots = [];
+    targetArray.forEach(target => {
+      let parentNode = target.parentNode;
+      while (parentNode.parentNode && !parentNode.host) {
+        parentNode = parentNode.parentNode;
+      }
+      const head = parentNode.querySelector('head');
+      domRoots.push(head || parentNode);
+    });
+    if (domRoots.length) {
+      const style = document.createElement('style');
+      style.textContent = baseCss;
+      style.setAttribute('data-react-tooltip', 'true');
+      domRoots
+        .filter((item, idx, src) => src.indexOf(item) === idx)
+        .forEach(domRoot => {
+          // Prevent styles duplication.
+          if (!domRoot.querySelector('style[data-react-tooltip]')) {
+            domRoot.appendChild(style);
+          }
+        });
+    }
+  }
+
   /**
    * Return if the mouse is on the tooltip.
    * @returns {boolean} true - mouse is on the tooltip