React strap with multiple ToolTips

Question

I have following:

<Col sm="12" md="4">
  <FormGroup>
    <Label for="exampleText">
      Vendor Name*{" "}
      <FontAwesomeIcon
        id="TooltipExample"
        icon={faInfoCircle}
        color={"blue"}
      />
    </Label>
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="TooltipExample"
      toggle={toggle}
    >
      Please make sure that the name filled in is same as Bank Account
      name. If the names are different, please input reason under
      'Notes'.
    </Tooltip>
    <Input
      innerRef={register({ required: true })}
      type="input"
      name="name"
      disabled={!accountEditMode}
    />
    {errors.vendorName && <div className={"text-danger"}>Required</div>}
  </FormGroup>
</Col>
<Col sm="12" md="4">
  <FormGroup>
    <Label>
      Address Line 1{" "}
      <FontAwesomeIcon
        id="tooltipAddress1"
        icon={faInfoCircle}
        color={"blue"}
      />
    </Label>
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="tooltipAddress1"
      toggle={toggle}
    >
      Please make sure that the name filled in is same as Bank Account
      name. If the names are different, please input reason under
      'Notes'.
    </Tooltip>
    <Input
      maxLength="50"
      innerRef={register({ required: true })}
      type="input"
      name="address1"
      disabled={!accountEditMode}
    />
  </FormGroup>
</Col>

The problem above is that every time I hover a tooltip all is opened because they share same hook (tooltipOpen). However I dont want to have 56 different hooks for my tooltips. Any tips on how to do this? Cant be true you need a hook for each tooltip.

Answer 1

You can wrap your Tooltip components.

function MyToolTip () {
  const [tooltipOpen, setTooltipOpen] = useState(false)

  return (
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="TooltipExample"
      toggle={() => setTooltipOpen(!tooltipOpen)}
    >
  )
}