andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Tooltip.md

Browse Source
This commit is contained in:
Angelos Chalaris
2018-11-29 10:28:42 +02:00
committed by GitHub
parent c93e00bd97
commit 2e68aa933a
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
snippets/Tooltip.md
View File

@ -2,18 +2,10 @@
Renders a tooltip component.
The `show` property on the component state is set to `false` as default.
Use an object, `style`, to hold the styles for the component.
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.
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.
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.
```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 -->