I am using react slider with tooltip.
<Slider
min={ set_min(this.state.myValue) }
max={ set_max(this.state.myValue) }
defaultValue={ set_def(this.state.myValue) }
handle={handle}
toolTipVisibleAlways = {true}
/>
<Tooltip
className = "tooltip-custom"
prefixCls="rc-slider-tooltip"
overlay={percentFormatter(value, this.state.myValue) }
visible={dragging}
placement="top"
key={index}
delayShow = {300}
delayHide = {150}
>
<Handle value={value} {...restProps} />
</Tooltip>
all things are good and well-displayed.
what i want to know is that how can i make tooltip always visible.
I searched this answer on the internet and found two answers.
first one is toolTipVisibleAlways = {true}
and second one is
delayShow = {300}
delayHide = {150}
But as you can see my code, nothing changed.
Use tipProps props exposed after Slider wrapped by createSliderWithTooltip. Example below should work as tipProps will pass the props to rc-tooltip component.
Read here for detailed explanation and also see this example provided by rc-slider
.
<Slider
min={ set_min(this.state.myValue) }
max={ set_max(this.state.myValue) }
defaultValue={ set_def(this.state.myValue) }
handle={handle}
tipProps={{visible:true}}
/>
I solved this issue by making my own inside the handle. This way the text will always move with the handle.
<SliderTooltip
prefixCls="rc-slider-tooltip"
visible={dragging}
placement="top"
key={index}
defaultVisible={true}
visible={true}
align={{
offset: [0, -5],
}}
>
<Handle value={value} {...restProps}>
<span>{value}</span>
</Handle>
</SliderTooltip>
Related
Context: I have table cell which have ellipsis, so I want to have a tooltip over the title.
Currently I am using Material UI Tooltip. Also, since there is a search option and hence I am using the highlighter react-highlight-words to highlight the search term.
Problem: When wrapping the Highlighter component with the Tooltip, the tooltip is not popping up as it does usually. I have used react-tooltip instead and it works.
Below is the code snippet of what I am trying to render :-
<TableCell align="center">
<Tooltip title={title}>
<Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
</Tooltip>
Seeking some help how to utilise the MUI Tooltip along with the Highlighter.
Here is the code when using react-tooltip:
<TableCell align="center">
<span data-tip={title}>
<Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
<ReactTooltip delayShow={500} effect="solid" border={false}/>
</span>
</TableCell>
I went through the documentation for the Tooltip and the Highlighter and found that,
Tooltip requires only one direct child, and the Highlighter renders multiple child.
Hence, the simple solution was to wrap the Highlight Component with some <span> tag, etc.
<TableCell align="center">
<Tooltip title={title}>
<span>
<Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
</span>
</Tooltip>
</TableCell>
Live Demo
It doesn't work because you are using a custom component that doesn't support the API that let you pass the ref down to the DOM element. The <Tooltip/> needs the child reference to know where the DOM element is so it can position itself correctly.
You can fix it by using React.forwardRef() which allow <Tooltip/> to access the children ref
const HighlightedSentence = React.forwardRef((props, ref) => {
return (
<span ref={ref} style={{ backgroundColor: "pink" }}>
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={["and", "or", "the"]}
autoEscape={true}
textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
{...props}
/>
</span>
);
});
function App() {
return (
<Tooltip title={"my tooltip"} placement="bottom">
<HighlightedSentence />
</Tooltip>
);
}
Live Demo
I need my tabs to have a tab consisting of a switch but when I implemented it as it was said, I am not able to see it there.
Maybe it's hidden underneath but I tried changing its z-index.
Pass your Switch component as the label prop.
...
<Tab
component="span"
label={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
Tab component does not display children props inside the MuiTab-wrapper element.
Maybe you can use icon props.
<Tab
component="span"
icon={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
I'm Having a hell of a time trying to get custom labels on a recharts radar chart working. I've tried doing multiple things according to the docs so I figured I'd throw it to the wolves. Hopefully one of you can point me in the right direction.
<ResponsiveContainer>
<RadarChart outerRadius={125} cy={175} data={ucRadarData}>
<Legend verticalAlign='top' height={36} />
<PolarGrid />
<PolarAngleAxis dataKey='value'>
<Label content={({ value }) => <Typography>{value}</Typography>} /> // When I remove this component, the labels get removed as well so I assume this is the component I want to target.
</PolarAngleAxis>
<PolarRadiusAxis domain={[lowestRangeStart, highestRangeEnd]} tickCount={tickArray.length} />
<Radar label={({ label }) => <Typography>{label}</Typography>} name='Self Assessment' dataKey='Self' stroke='#8884d8' fill='#8884d8' fillOpacity={0.6} /> // Also tried adding custom label here.
</RadarChart>
</ResponsiveContainer>
Do this:
Make a render function for custom tick and add that as tick prop to your PolarAngleAxis component
function customTick({ payload, x, y, textAnchor, stroke, radius }) {
return (
<g
className="recharts-layer recharts-polar-angle-axis-tick"
>
<text
radius={radius}
stroke={stroke}
x={x}
y={y}
className="recharts-text recharts-polar-angle-axis-tick-value"
text-anchor={textAnchor}
>
<tspan x={x} dy="0em">
{payload.value}
</tspan>
</text>
</g>
);
}
<PolarAngleAxis dataKey='value' tick={customTick}/>
I upgraded to material-ui v4.0.1 and I see that Modals now require a forwarded ref. I'm having some trouble implementing a fix for this using class components and Dialogs.
I tried using React.createRef() as well as React.forwardRef((props, ref) => (...) in a few places but I can't figure out how to resolve this warning.
In my parent component I render a custom component
<ApolloFormDialog />
In ApolloFormDialog I render essentially:
<Dialog ...>
{title}
{subtitle}
{form}
</Dialog>
The full warning is Warning: Failed prop type: Invalid prop 'children' supplied to 'Modal'. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead?
However I am using class components currently. Migrating to use function components is not an option right now as my app is rather large.
I have tried adding a ref to ApolloFormDialog as
<ApolloFormDialog ref={React.createRef()} />
as well as wrapping ApolloFormDialog's class with:
export default React.forwardRef((props, ref) => <ApolloFormDialog ref={ref} {...props}/>)
and then adding that ref to the dialog as
<Dialog ref={this.props.ref} />
but the warning still persists, and I'm not sure where to go from here.
My issue didn't actually have to do with Dialog, but with the prop TransitionComponent on Dialog.
I switch between two types of transitions in my ApolloFormDialog depending on if the screen is below a certain breakpoint, which was being called as function components:
<Dialog
open={open}
onClose={onRequestClose}
classes={{
paper: classnames(classes.dialogWidth, classes.overflowVisible),
}}
fullScreen={fullScreen}
TransitionComponent={
fullScreen ? FullscreenTransition : DefaultTransition
}
>
{content}
</Dialog>
FullscreenTransition and DefaultTransition come from a file and are defined as follows:
import React from 'react'
import Fade from '#material-ui/core/Fade'
import Slide from '#material-ui/core/Slide'
export function DefaultTransition(props) {
return <Fade {...props} />
}
export function FullscreenTransition(props) {
return <Slide direction='left' {...props} />
}
export function FullscreenExpansion(props) {
return <Slide direction='right' {...props} />
}
Changing these functions to the following fixed my issue:
import React from 'react'
import Fade from '#material-ui/core/Fade'
import Slide from '#material-ui/core/Slide'
export const DefaultTransition = React.forwardRef((props, ref) => (
<Fade {...props} ref={ref} />
))
export const FullscreenTransition = React.forwardRef((props, ref) => (
<Slide direction='left' {...props} ref={ref} />
))
export const FullscreenExpansion = React.forwardRef((props, ref) => (
<Slide direction='right' {...props} ref={ref} />
))
This was a relatively hard issue to solve on my end, so I'm going to leave this question up just in case someone else runs into a similar issue somewhere down the road.
I have had the same problem with "#material-ui/core/Tooltip" wrapping a new functional component. Even if the component was wrapped in a div inside its own code.
<!-- "Did you accidentally use a plain function component for an element instead?" -->
<Tooltip>
<NewFunctionalComponent />
</Tooltip>
<!-- Wrapped in a new div, devtools won't complain anymore -->
<Tooltip>
<div>
<NewFunctionalComponent />
</div>
</Tooltip>
<!-- No more warnings! -->
Wrapping my component to another div inside material-ui transition componet (like Slide, Fade etc) solves my issue.
Example code:
From
<Slide direction='Right' in = {isSideNavOpen} mountOnEnter unmountOnExit>
<MyComponent />
</Slide>
To
<Slide direction='Right' in = {isSideNavOpen} mountOnEnter unmountOnExit>
<div><MyComponent /></div>
</Slide>`
React.forwardRef fixes the issue for me, too.
To ensure that the React.forwardRef solution works with Typescript, you must implement the following as per the documentation in Material-UI:
const Transition = React.forwardRef<unknown, TransitionProps>(function Transition(props, ref) {
return <Slide ref={ref} {...props} />;
});
See the source code in their demo here.
I was getting the same error
expected an element that cand hold a ref
I solved by adding a <Box></Box> surrounding my children component.
From
<Modal open={open} onClose={handleClose}>
<DetailsCard />
</Modal>
To
<Modal open={open} onClose={handleClose}>
<Box>
<DetailsCard />
</Box>
</Modal>
I had a similar problem and I solved it by wrapping my functional component in a div.
In my case the problem ocurred with a Tooltip component wrapping a custom functional component.
<Tooltip tittle={...}>
<CustomFC />
</Tooltip>
And the solution was
<Tooltip tittle={...}>
<div>
<CustomFC />
</div>
</Tooltip>
I am using Recharts BarChart components to visualize my data. In the Bar component, it supports a few events handler (onClick, onMouseDown, etc).
My question: I have an onClick event handler so users are able to click on the bar chart and redirect to other pages based on the result ID.
My problem: If the bar chart's value is at 0, users are unable to click on the link since onClick event handler is implemented on the bar itself.
Source code:
<BarChart
width={500}
height={500}
layout="vertical"
data={data}
>
<XAxis type="number" />
<YAxis dataKey="title" type="category" />
<Bar
dataKey="score"
fill={Color}
label={<CustomLabel />}
onClick={(data, index) => {
// some logic here
return history.push(`/${data.x.y.id}`);
}}
/>
</BarChart>
Screenshot:
My attempt:
I tried to look at a possible solution and observe the examples on the API in recharts website, I don't see anything that is able to solve my problem. I also tried to have onClick on the title on axis or bar, but the component does not support the feature. Please advise.
You can add an onClick attribute on the BarChart component and check data.activePayload[0] to see which bar chart has been clicked.
<BarChart
width={500}
height={500}
layout="vertical"
data={data}
onClick={(data) => {
// do your history.push based on data.activePayload[0]
if (data && data.activePayload && data.activePayload.length > 0) {
return history.push(`/${data.activePayload[0].x.y.id}`);
}
}}
>
<XAxis type="number" />
<YAxis dataKey="title" type="category" />
<Bar
dataKey="score"
fill={Color}
label={<CustomLabel />}
/>
</BarChart>