/Html/Show text when mouse over button html

Show text when mouse over button html

--Usage of Tooltip component

import { Button } from 'reactstrap'

<Tooltip
  tooltipContent={
    'You cannot cancel invoices that were created automatically by memberships!'
  }
  component={
    <span id={'cancelButton'}>
      <Button
        style={{ pointerEvents: 'none' }}
        onClick={...}
        disabled
      >
        Cancel
      </Button>
    </span>
  }
/>

Source: stackoverflow.com

Show text when mouse over button html

--Tooltip.jsx

import React, { useState } from 'react'
import * as Reactstrap from 'reactstrap'

const Tooltip = props => {
  const [tooltipOpen, setTooltipOpen] = useState(false)
  const toggle = () => setTooltipOpen(!tooltipOpen)
  // Warnings for component useage
  if (!props.component) {
    console.warn('Missing component for tooltip')
  }
  if (!props.tooltipContent) {
    console.warn('Missing content for tooltip')
  }
  if (props.component && !props.component.props.id) {
    console.warn('Component for tooltip has no id (must not have spaces)')
  }
  return (
    <React.Fragment>
      {props.component}
      {props.tooltipContent && (
        <Reactstrap.Tooltip
          placement={props.placement ? props.placement : 'top'}
          isOpen={tooltipOpen}
          target={props.component.props.id}
          toggle={toggle}
          delay={props.delay ? props.delay : 750}
        >
          {props.tooltipContent && (
            <div className="row p-2">
              <div className="col-md-12">{props.tooltipContent}</div>
            </div>
          )}
        </Reactstrap.Tooltip>
      )}
    </React.Fragment>
  )
}
Tooltip.displayName = 'Tooltip'
export default Tooltip

Source: stackoverflow.com

Similar codes

18 votes125 views3 answers
Html inline css
Html
30 votes144 views1 answer
Fork me github ribbon code html css
Html
0 vote129 views2 answers
Fill color behid text in html
Html
0 vote124 views1 answer
How to embed link in text //ptwmjmp.com/?siteId=jasmin&categoryName=&pageName=home&performerName=&prm[psid]=Seb868&prm[pstool]=205_1&prm[psprogram]=revs&prm[campaign_id]=&subAffId={SUBAFFID}&filters=
Html
44 votes122 views6 answers
Comment in html
Html
0 vote131 views2 answers
Css make bottom of the div triangle
Html
15 votes133 views3 answers
Favicon html link
Html
0 vote155 views1 answer
Fontawesome icons reference
Html
1 vote136 views1 answer
Empty link html
Html
4 votes127 views6 answers
Boostrap
Html