show text when mouse over button html

1--Usage of Tooltip component
2
3import { Button } from 'reactstrap'
4
5<Tooltip
6  tooltipContent={
7    'You cannot cancel invoices that were created automatically by memberships!'
8  }
9  component={
10    <span id={'cancelButton'}>
11      <Button
12        style={{ pointerEvents: 'none' }}
13        onClick={...}
14        disabled
15      >
16        Cancel
17      </Button>
18    </span>
19  }
20/>
21

1--Tooltip.jsx
2
3import React, { useState } from 'react'
4import * as Reactstrap from 'reactstrap'
5
6const Tooltip = props => {
7  const [tooltipOpen, setTooltipOpen] = useState(false)
8  const toggle = () => setTooltipOpen(!tooltipOpen)
9  // Warnings for component useage
10  if (!props.component) {
11    console.warn('Missing component for tooltip')
12  }
13  if (!props.tooltipContent) {
14    console.warn('Missing content for tooltip')
15  }
16  if (props.component && !props.component.props.id) {
17    console.warn('Component for tooltip has no id (must not have spaces)')
18  }
19  return (
20    <React.Fragment>
21      {props.component}
22      {props.tooltipContent && (
23        <Reactstrap.Tooltip
24          placement={props.placement ? props.placement : 'top'}
25          isOpen={tooltipOpen}
26          target={props.component.props.id}
27          toggle={toggle}
28          delay={props.delay ? props.delay : 750}
29        >
30          {props.tooltipContent && (
31            <div className="row p-2">
32              <div className="col-md-12">{props.tooltipContent}</div>
33            </div>
34          )}
35        </Reactstrap.Tooltip>
36      )}
37    </React.Fragment>
38  )
39}
40Tooltip.displayName = 'Tooltip'
41export default Tooltip
42