I am trying to use a tool tip but not sure how to make the trigger work

Question

I want my tooltip to display on hover I am using reactrap tooltip and have been looking over the documentation for it but I cant seem to get the tooltip to call to my function that sets the state for it to be shown. This is my code:

 const PracticesList = () => {
    const [isShown, setIsShown] = useState(false);

const toggleToolTip = () => {
      console.log("MADE IT");
      setIsShown(!isShown);
    };

return allPractices.map((p) => (
      <DropdownItem
        key={p.id}
        toggle={false}
        tag="div"
        className={styles.submenuItem}
        onClick={() => {
          // only switch the practice if the practice selection has changed
          if (currentUser.currentPracticeID != p.id) {
            onSwitchPractice(p.id);
          }
          setMainDropdownOpen(false);
        }}
      >
        <span
          style={{ width: "300px", backgroundColor: "black", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          {p.name}
        </span>
        <Tooltip
          placement="right"
          trigger="hover"
          isOpen={true}
          target="Tooltip"
          toggle={toggleToolTip()}
        >
          {p.name}
        </Tooltip>
      </DropdownItem>
    ));
  };

Note: this dropdown item is nested within another im not sure if this affects how tooltip is applied but any advice would be helpful. This is my first time using a tool tip this is the documentation ive been looking over for it https://reactstrap.github.io/components/tooltips/[enter link description here]1

Answer 1

It appears that you want to trigger a tooltip on hover of your DropdowItem element. The idea is likely to have multiple DropdownItems, each of which will be associated with a tooltip.

You need to isolate each DropdownItem element with its tooltip into its own component, which will be very helpful as the their corresponding tooltips need the ability to mange their own states. Here is the idea:

const DropdownItemWithToolTip = (props) => {
  const [tooltipOpen, setTooltipOpen] = useState(false);

  const toggle = () => setTooltipOpen(!tooltipOpen);

  return (
    <div>
      <DropdownItem key={props.id} toggle={false} tag="div">
        <span href="#" id={"tooltip-" + props.id}>
          {props.name}
        </span>
      </DropdownItem>
      <Tooltip
        placement="right"
        trigger="hover"
        isOpen={tooltipOpen}
        target={"tooltip-" + props.id}
        toggle={toggle}
      >
        {props.name}
      </Tooltip>
    </div>
  );
};

Then your PracticesList element can be something as simple as:

const PracticesList = () => {
  return allPractices.map((p) => <DropdownItemWithToolTip key={p.id} {...p} />);
};

All it does is return a bunch of DropdownItemWithToolTips. Rendering it is a piece of cake:

return (
    <div>
      <h3>Tooltip</h3>
      <PracticesList />
    </div>
  );

Here is a Sandbox for you: https://codesandbox.io/s/floral-architecture-01dv1?file=/src/App.js