Tooltip

Tooltip component show some extra hint info

Usage

Show Tooltip

function TooltipUsage() {
  const [showTooltip, setShowTooltip] = useState(false)

  return (
    <View>
      <Tooltip
        title="Hey from Blossom Tooltip!"
        visible={showTooltip}
        Target={
          <Button onPress={() => setShowTooltip((prev) => !prev)}>
            Show Tooltip
          </Button>
        }
        onBackdropPress={() => {
          setShowTooltip(false)
        }}
      />
    </View>
  )
}

Custom

Show Tooltip

function TooltipCustom() {
  const [showTooltip, setShowTooltip] = useState(false)

  return (
    <Tooltip
      title="Hello from Tooltip!"
      visible={showTooltip}
      Target={
        <Button
          style={{alignSelf: 'center'}}
          onPress={() => setShowTooltip((prev) => !prev)}>
          Show Tooltip
        </Button>
      }
      onBackdropPress={() => {
        setShowTooltip(false)
      }}
      contentStyle={{
        backgroundColor: 'green',
        width: 160,
      }}
      titleStyle={{color: 'white'}}
    />
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	Pick<PopoverProps, 'visible' | 'contentStyle' | 'Target' | 'onBackdropPress' | 'position' | 'offset'>	--	Inherits properties from Pick<PopoverProps, 'visible' | 'contentStyle' | 'Target' | 'onBackdropPress' | 'position' | 'offset'>
title	string	--	Title text for the tooltip
titleStyle	StyleProp<TextStyle>	--	Style of the tooltip title text