CODEWITHSUNDEEP
javascriptreactjsreact-nativematerial-uistoppropagation
kenny229
kenny229

Reputation: 177

Tooltip within button is propagating to parent element onclick which is button

I have a tooltip that is nested within a button. And in that tooltip, there is a 'read more' link inside the tooltip popup. The issue is when I click that 'read more' link that is within that tooltip, that is supposed to take you to an article. But it clicks the parent element, which is a button instead and triggers that onClick event instead of the read more link. I have tried doing e.stopPropagation() but that does not do the trick. Is there any other way to get around this?

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    return (
      <Button
        name="buyItem"
        variant="outlined"
        style={buttonStyleOverride}
        className={classes.button}
        color="primary"
        disabled={buttonDisabled}
        onClick={
          this.addItems,
          e => e.stopPropagation()
        }>
        Buy Pikafoods
        <TooltipIcon
          title="You can read more about pikafoods here."
          learnMoreLink="https://pokemon.com/articles/pikafoods"
          style={{ position: 'relative', top: '-2px' }} />
      </Button>
    );
  }
}

Upvotes: 1

Views: 1069

Answers (1)

Preetham Sridhar
Preetham Sridhar

Reputation: 153

There are things that should not be done here.

  1. Using TooltipIcon instead of ToolTip
  2. Using TooltipIcon in a wrong way
  3. There is no learnMoreLink for Tooltip from the material. Which you can refer from here

This is the solution:

renderTooltipContent = () => (
  <>
    You can read more about pikafoods 
    <a href="https://pokemon.com/articles/pikafoods">
      here
    </a>.
  </>
)

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    
    return (
        <>
            <Tooltip
                interactive
                title={this.renderTooltipContent()}
                style={{ position: 'relative', top: '-2px' }} 
            >
                <Button
                    name="buyItem"
                    variant="outlined"
                    style={buttonStyleOverride}
                    className={classes.button}
                    color="primary"
                    disabled={buttonDisabled}
                    onClick={this.addItems}
                >
                    Buy Pikafoods
                </Button>
            </Tooltip>
        </>
    );
}

}

Upvotes: 1

Related Questions