docs: update readme with anchorSelect changes

Author: gabrieljablonski

README.md

@@ -46,17 +46,17 @@ yarn add react-tooltip
 
 ## Usage
 
-### Using NPM
+### Using NPM package
 
-1 . Import the CSS file to set default styling
+1 . Import the CSS file to set default styling.
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
 ```
 
 This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
 
-2 . Import `react-tooltip` after installation
+2 . Import `react-tooltip` after installation.
 
 ```js
 import { Tooltip } from 'react-tooltip'
@@ -68,20 +68,41 @@ or if you want to still use the name ReactTooltip as V4:
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 ```
 
-3 . Add `data-tooltip-content="your placeholder"` to your element
+3 . Add `data-tooltip-content="<your placeholder>"` and `data-tooltip-id="<tooltip id>"` to your element.
+
+> `data-tooltip-id` is the equivalent of V4's `data-for`.
 
 ```jsx
-<p id="my-element" data-tooltip-content="hello world">
-  Tooltip
-</p>
+<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
+  ◕‿‿◕
+</a>
+```
+
+4 . Include the `<Tooltip />` element.
+
+> Don't forget to set the id, it won't work without it!
+
+```jsx
+<Tooltip id="my-tooltip" />
 ```
 
-4 . Include react-tooltip component
+#### Using multiple anchor elements
+
+You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them.
+`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
 
 ```jsx
-<ReactTooltip anchorId="my-element" />
+<a className="my-anchor-element" data-tooltip-content="Hello world!">
+  ◕‿‿◕
+</a>
+<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
+  ◕‿‿◕
+</a>
+<Tooltip anchorSelect=".my-anchor-element" />
 ```
 
+Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
+
 ### Standalone
 
 You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
@@ -98,27 +119,26 @@ PS: all the files have a minified version and a non-minified version.
 
 For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
 
-### Security Note
+### 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](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.
 
-#### JSX Note
+#### JSX note
 
-You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
+You can use [`React.renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
 **Example:**
 
 ```jsx
 import ReactDOMServer from 'react-dom/server';
 [...]
-<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
-  Hover me
-</p>
+<a 
+  data-tooltip-id="my-tooltip"
+  data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
+>
+  ◕‿‿◕
+</a>
 ```
 
-#### Note
-
-- **id** is necessary, because `<ReactTooltip anchorId="my-element" />` finds the tooltip via this attribute
-
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)