Fade appears to no longer work

[timmeade]

Just installed and built first tip. Looks good, but need the fade in out.

Adding animation="fade" and the tooltip does not show at all

NextJS 11 using useState and tailwind. Everything works until adding animation="fade".

Works

import { useState } from 'react';
import Tooltip from 'react-power-tooltip';
import { PlusIcon } from '@heroicons/react/solid';

export function AddButton({ onClick }) {
  const [show, setShow] = useState(false);
  return (
    <div
      onClick={onClick ? () => onClick(true) : null}
      className="relative w-8 items-center justify-center  border border-transparent filter shadow-md p-1
                            text-base font-medium rounded-full text-purple-100 bg-purple-500 border border-color-purple-500
                            hover:bg-purple-700 hover:cursor-pointer focus:outline-none focus:ring-0 "
      // onMouseOver={() => setTimeout(() => setShow(true), 1000)}
      onMouseOver={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <PlusIcon className=" h-6 w-6" aria-hidden="true" />
      <Tooltip show={show}>
        <span className="text-sm text-purple-600 w-200 font-light">
          Add new profile
        </span>
      </Tooltip>
    </div>
  );
}

Does not work at all. Tooltip never appears.

import { useState } from 'react';
import Tooltip from 'react-power-tooltip';
import { PlusIcon } from '@heroicons/react/solid';

export function AddButton({ onClick }) {
  const [show, setShow] = useState(false);
  return (
    <div
      onClick={onClick ? () => onClick(true) : null}
      className="relative w-8 items-center justify-center  border border-transparent filter shadow-md p-1
                            text-base font-medium rounded-full text-purple-100 bg-purple-500 border border-color-purple-500
                            hover:bg-purple-700 hover:cursor-pointer focus:outline-none focus:ring-0 "
      // onMouseOver={() => setTimeout(() => setShow(true), 1000)}
      onMouseOver={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <PlusIcon className=" h-6 w-6" aria-hidden="true" />
      <Tooltip show={show} animation='fade'>
        <span className="text-sm text-purple-600 w-200 font-light">
          Add new profile
        </span>
      </Tooltip>
    </div>
  );
}