Update Tooltip.md

snippets/Tooltip.md

@@ -2,18 +2,10 @@
 
 Renders a tooltip component.
 
- The `show` property on the component state is set to `false` as default.
+Set the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.
- 
+Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
- Use an object, `style`, to hold the styles for the component.
+Bind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.
- 
+In the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.
- Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
- 
- In the `render()` method, destructure `state` and `props`, compute if visibility style should be set to `visible` or not and apply the combined style
- to the tooltip component.
- 
- Render the `children` as sibling to the tooltip using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
- props along with `onMouseEnter` and `onMouseLeave` events which we bind to the `toggleTooltip` call.
- 
  
 ```jsx
 class Tooltip extends React.Component {
@@ -73,6 +65,7 @@ class Tooltip extends React.Component {
   }
 }
 ```
+
 ```jsx
  ReactDOM.render(
      <Tooltip text='Simple tooltip'>
@@ -80,4 +73,8 @@ class Tooltip extends React.Component {
      </Tooltip>,
      document.getElementById('root')
  );
- ```
+```
+ 
+<!-- tags: visual,state,children,class -->
+
+<!-- expertise: 1 -->