#Max width not working on tooltip

26 messages · Page 1 of 1 (latest)

jaunty onyx
#

Hi I have this block of code

  <Tooltip
                    wrapLines
                    sx={{ maxWidth: 20 }}
                    withArrow
                    transition='fade'
                    transitionDuration={200}
                    label={item.description}
                    position='bottom'
                    ml={5}
                  >
                    <AiOutlineInfoCircle size={15} color='white' />
                  </Tooltip>

The output looks like the image attached.
As you can see the tooltip is still very long despite already setting the maxWidth to 20

image.png
woven imp
jaunty onyx
#

haven't updated it yet

woven imp
#

Its same for v4

woven imp
jaunty onyx
#

do you mean I should add a width?

#

I didn't add a width cause I want it to be responsive, if the text is short it ends up having lots of extra space

woven imp
#

Just use the ezample provided
<Tooltip
multiline
width={220}
withArrow
transition="fade"
transitionDuration={200}
label="Use this button to save this information in your profile, after that you will be able to access it any time and share it via email."
>
<Button variant="outline">Multiline tooltip</Button>
</Tooltip>

#

add a multiline prop

jaunty onyx
#

<Tooltip
wrapLines
width={220}
withArrow
transition="fade"
transitionDuration={200}
label="Use this button to save this information in your profile, after that you will be able to access it any time and share it via email."
>
<Button variant="outline">Multiline tooltip</Button>
</Tooltip>

#

This is the example in v4^

#

it seems to only work because there is a width set

woven imp
#

oh did not notice this before. my bad

jaunty onyx
#

If i add the width it ends up looking like this if the text is short

image.png
woven imp
#

try this sx={{ maxWidth: '20px'}}

#

in your code you are not specifing the width piels or css unit

jaunty onyx
#

okay I'll try

#

unfortunately it didn't work as well

# 
  <Tooltip
                    wrapLines
                    sx={{ maxWidth: '20px' }}
                    withArrow
                    transition='fade'
                    transitionDuration={200}
                    label={item.description}
                    position='bottom'
                    ml={5}
                  >
                    <AiOutlineInfoCircle size={15} color='white' />
                  </Tooltip>```

I believe if you don't specify the unit it defaults to px
#

but ye maybe it has something to do with the component itself

#

ill just try to make a work around

woven imp
#

ok

woven imp
#

I was wandering why are you not updating to v5