0

This has been asked before, but in my case I can not change CSS (opacity -> rgba) of the parent.

I have a tooltip react component in a button that I need to display when the button is disabled (opacity: 0.65). Button has classes from bootstrap, so can not be changed. I need to fully remove transparency on the tooltip. Is there a way to solve this?

Code:

const showTooltip = () => {
    if (ALLOW_CREATION) return null;
    return (
        <a href={"#"}>{gettext('Info to show on a tooltip')}</a>
    );
};

<button
    type="button"
    className={classnames('btn btn-icon text-uppercase pull-right', {
        disabled: !ALLOW_CREATION,
    })}
    onClick={this.openModal}
    disabled={!ALLOW_CREATION}
>
    <Tooltip
        content={showTooltip()}
        style={{
            fontSize: '85%',
            width: '220',
            padding: 3,
            whiteSpace: 'normal',
            textTransform: 'none',
            opacity: 1,
        }}
        leftOffset={-1}
        topOffset={-2}
        noBreak={false}
    >
        {gettext('Push button')}
    </Tooltip>
</button>
perrer
  • 29
  • 5

0 Answers0