How to make react-native-elements Tooltip size dynamic based on its content?

Question

The React Native Elements Tooltip (docs here) requires you to pass in the width and height property for the tooltip, but I want to create a generic tooltip button that can receive any element as its popover prop.

The following example is what I have, but it uses the default size set to the tooltip by the React Native Element library:

import React from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'

const Container = styled.View`
  justify-content: center;
  align-items: center;
  background-color: #aaf;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
`

const Icon = styled.Text``

export default function TooltipButton({ tooltip }) {
  return (
    <Tooltip popover={tooltip}>
      <Container>
        <Icon>?</Icon>
      </Container>
    </Tooltip>
  )
}

When the content is bigger than the default size it looks like this.

I Don't want to have to pass a fixed size as prop to this component, I would like it to have a tooltip size depending on it's content.

Have you try add `flex:1` in style? [Flex](https://reactnative.dev/docs/layout-props#flex) would resize to fit the parent or container? — 高鵬翔, May 11 '20 at 03:18
If you could post some part of your code will be more easier to help you. — 高鵬翔, May 11 '20 at 03:21
@高鵬翔 do you mean flex:1 in the popover element container? That didn't work. — Bruno Fernandes, May 11 '20 at 03:56
Added the code I had before changing it to how it looks like in my answer. — Bruno Fernandes, May 11 '20 at 03:59

Bruno Fernandes · Answer 1 · 2020-05-11T04:21:27.337

After some time trying to figure this out, I managed to do a somewhat autosize tooltip button that receives a content element as a prop (tooltip) and resizes itself based on its content.

The only way I got it to work properly was to set an initial size bigger than the content (500x500) and add more size to it (+30).

import React, { useState } from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'

const Container = styled.View`
  justify-content: center;
  align-items: center;
  background-color: #aaf;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
`

const Icon = styled.Text``

export default function TooltipButton({ tooltip }) {
  const [tooltipSize, setTooltipSize] = useState({ w: 500, h: 500 })

  const tooltipClone = React.cloneElement(
    tooltip,
    { onLayout: (e) => setTooltipSize({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height }) }
  )

  return (
    <Tooltip 
      popover={tooltipClone} 
      width={tooltipSize.w + 30} 
      height={tooltipSize.h + 30}
    >
      <Container>
        <Icon>?</Icon>
      </Container>
    </Tooltip>
  )
}

End result looks like this.

Thanks for sharing the component! Do you know the reason why it is necessary to increase the width and height (+30) and to set an initial size bigger than the content?? — Victor Molina, Sep 14 '20 at 13:32
@VictorMolina no idea, I got to this by doing a lot of experimentation =/ — Bruno Fernandes, Jun 27 '21 at 03:28

score 0 · Answer 2 · answered Apr 23 '21 at 08:54

0

I guess it's enough to add 20 units to width and height. That's required because the default style applied to the Tooltip component adds a padding of 10, see here.

answered Apr 23 '21 at 08:54

Jascha

21
6

Bilal Abdeen · Answer 3 · 2022-01-02T23:10:18.823

0

It seems that using null forces height and width to take as much space as the contents need!

height={null} // using height={null} seems to look good
width={null} // using width={200} seems to look better than null

Source of this hint: ToolTip in react native

edited Jan 02 '22 at 23:10

answered Jan 02 '22 at 21:23

Bilal Abdeen

1,627
1
19
41

How to make react-native-elements Tooltip size dynamic based on its content?

3 Answers3