Thema/Type is not applied at first render, default dark is set even if the type prop is light

[whiteadi]

I have the tooltip as this:

<ReactTooltip id="downloadTooltip" place="top" title={downloadTooltipTitle} type="light">
...
</ReactTooltip>

and first render has it with dark type and it is also not working, if i do some other action and get back to it it has the hardcoded light theme/type and working.

[bonesoul]

same issue here.

[whiteadi]

the way I fixed it, having it inside a modal:

import React, { Fragment, useMemo, memo, useEffect } from 'react';
import ReactTooltip from 'react-tooltip';
import clsx from 'clsx';
import { nanoid } from 'nanoid';

....


const Tooltip = (props: TooltipProps) => {
  const {
    children,
    className,
    id = nanoid(),
    title,
    place = 'top',
    delayShow = 400,
    disable = false,
    withShadow,
    type = 'dark',
    fontSize,
    disableRebuild = false,
    ...restProps
  } = props;

  const childrenProps = useMemo(
    () => ({
      ...children.props,
      'data-tip': title,
      'data-for': id,
    }),
    [children.props, title, id],
  );

  // Recalculate Tooltip position in modals https://github.com/wwayne/react-tooltip/issues/130
  useEffect(() => {
    if (!disableRebuild) {
      requestAnimationFrame(() => {
        ReactTooltip.rebuild();
      });
    }
  }, [disableRebuild]);

  return (
    <Fragment>
      {React.cloneElement(children, childrenProps)}

      <ReactTooltip
        id={id}
        className={clsx(
          styles.self,
          withShadow && styles.withShadow,
          type === 'light' && styles.fullOpacity,
          fontSize && styles[`fontSize-${fontSize}`],
          className,
        )}
        effect="solid"
        place={place}
        delayShow={delayShow}
        disable={disable}
        type={type}
        {...restProps}
      />
    </Fragment>
  );
};

[bonesoul]

i replaced it with https://www.npmjs.com/package/@tippyjs/react which is perfectly happy with SSR.