Ant Design 5.0: Set properties of Tooltip in ConfigProvider

Question

is there a way to set a property for all ant design tooltips using the ThemeProvider? I tried doing it like this but it is not changing the property.

<ConfigProvider
  theme={{
    components: {
      Tooltip: {
        mouseEnterDelay: 0.5,
    },
  },
}}>
    <App />
</ConfigProvider>

I really don't want to create a custom tooltip component just to change the hover duration.

Answer 1

You can't set a global mouseEnterDelay configuration value on the theme prop. ConfigProvider doesn't support it. The theme prop is only used for setting the theme, not the component behavior. It only accepts the design token, theme.components is used only for setting the custom component token.

See 5.1.5/components/tooltip/index.tsx#L179

// ...
const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
    direction,
  } = React.useContext(ConfigContext);
// ...

Tooltip component only uses these three configurations from ConfigContext. It uses the mouseEnterDelay prop from props, see /5.1.5/components/tooltip/index.tsx#L267

// ...
  const {
    getPopupContainer,
    placement = 'top',
    mouseEnterDelay = 0.1,
    mouseLeaveDelay = 0.1,
    overlayStyle,
    ...otherProps
  } = props;
// ...

I think it's ok to create your custom Tooltip component based on antd Tooltip component.