Looking to integrate the Tooltip component from the React Material UI Library into my project. The code snippet I am using is as follows:
<WhiteOnDarkGreyTooltipWithControls
disableTouchListener
disableFocusListener
title={
<Text selectable={false} style={[styles.ratedIndicatorTextColor]}>
{"Game Completion Rate"}
</Text>
}
placement={"bottom"}
disablePortal={true}
>
<Text selectable={false}>GCR</Text>
</WhiteOnDarkGreyTooltipWithControls>;
The structure of the
WhiteOnDarkGreyTooltipWithControlsimport withStyles from "@material-ui/core/styles/withStyles";
import Tooltip from "@material-ui/core/Tooltip";
import React from "react";
export const WhiteOnDarkGreyTooltip = withStyles({
tooltip: {
color: "E0E0E0",
backgroundColor: "#404040",
borderRadius: 2,
maxWidth: 200,
textAlign: "center",
fontWeight: 900,
padding: 8,
marginTop: 5,
opacity: 1
},
popper: {
opacity: 1
}
})(Tooltip);
export class WhiteOnDarkGreyTooltipWithControls extends React.Component {
state = { open: this.props.open };
render = () => (
<WhiteOnDarkGreyTooltip
TransitionComponent={({ children }) => children}
{...this.props}
enterDelay={0}
open={this.state.open}
PopperProps={{
placement: "bottom",
disablePortal: !!this.props.disablePortal,
modifiers: [
{
preventOverflow: {
enabled: false,
boundariesElement: "scrollParent"
}
}
]
}}
/>
);
open = () => this.setState({ open: true });
close = () => this.setState({ open: false });
}
Seeking to have black opaque background with white text in the tooltips, encountering some transparency issues in the specific usage mentioned above:
https://i.sstatic.net/NvnFv.png
Is there a way to remove any default opacity set by the Material UI library for this Component?