How change Ant design Tooltip width

user_11698656 0
Viewed 8979

I want to change the width of the tooltip, but I can't.
How do I do this?

import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';

export interface Props {
  tooltipeText: string
}

const hintWithTooltipeStyle = {
  position: 'relative' as 'relative',
  left: 5,
  top: 1
};


const HintWithTooltipe: FunctionComponent<Props> = ({
  tooltipeText
}: Props) => {
  return (
    <span style={hintWithTooltipeStyle}>
      <Tooltip placement="rightTop" title={tooltipeText} style={{width: 700, maxWidth: '500px !important'}}>
        <Button>Ant design</Button>
      </Tooltip>
    </span>
  );
};

export default HintWithTooltipe;

Inline styles don't work.
No styles work at all

antd typescript reactjs css
4 Answers

you can do like this without css class

 <Tooltip placement="rightTop" title={tooltipeText} overlayStyle={{maxWidth: '500px'}}>
     <Button>Ant design</Button>
</Tooltip>
user_167565520

The antd Tooltip can be adapted by overriding values in css class .ant-tooltip-inner.

.ant-tooltip-inner {
  color: yellow;
  background-color: green;
  width: 200px;
}

Here is a working CodeSandBox have a look at the index.css file for changes.

user_100360390

Or you could access overlayInnerStyle property from Tooltip.

<Tooltip overlayInnerStyle={{width: '250px'}} title={`tootltip text`}>
  Info Text
</Tooltip>
user_137486230

You should use min-width for changing inside border

overlayStyle={{ maxWidth: '260px' }}
user_149333750
Related