Error "Types of property ''data-tooltip-content'' are incompatible." when using react-tooltip

Question

I have this code:

<button
      type="button"
      data-tooltip-id="columns-setings-tooltip"
      className={clsx(
        styles.rowControlPanelColumnsOptions,
        isColumnsDialogVisible && styles.highlight
      )}
      data-tooltip-content={t(`${translationBase}.columnsSettings`)}
      onClick={handleColumnsControlPanel}
    >
      <Tooltip id="columns-setings-tooltip" />

      <ColumnsIcon />
    </button>

And I get TS error in the button tag (no matter if I use div or something else btw) that Types of property ''data-tooltip-content'' are incompatible. which is something I didn't get in the past with this library. Someone has an idea where this types incompatibility comes from?

Answer 1

Upgrade the package to the latest version react-tooltip@latest. Since v5.17.0, this shouldn't be an issue anymore. If you're unable to upgrade for any reason, see below.

---

data-tooltip-content (before v5.17.0) expects string | undefined. The return type for t() (DefaultTFuncReturn) is not compatible, so you must pass it like so:

data-tooltip-content={t(`${translationBase}.columnsSettings`) ?? ''}

You could also use || instead of ?? but I suggest keeping it like that.