Looking for a way to have material-ui's tooltip expand the text in a table cell ONLY if the text is cut off with an ellipsis (overflowing).
Currently in my table I have a cell like this:
<TableCell className={classes.descriptionCell}>{row.description}</TableCell>
and my styling for descriptionCell is like this:
descriptionCell: {
whiteSpace: 'nowrap',
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
This makes the text behave the way I would like it to in this table, but I want to be able to hover and view the rest of it in a tooltip, preferably Material-UI's built in tooltip component.
I know there is a package that exists here https://www.npmjs.com/package/react-ellipsis-with-tooltip which should do this, BUT it uses bootstrap tooltip, not material UI.
To go off of @benjamin.keen answer. Here is a standalone functional component which is just an extension of his answer using hooks to perform the comparison functions.
import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
const OverflowTip = props => {
// Create Ref
const textElementRef = useRef();
const compareSize = () => {
const compare =
textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
console.log('compare: ', compare);
setHover(compare);
};
// compare once and add resize listener on "componentDidMount"
useEffect(() => {
compareSize();
window.addEventListener('resize', compareSize);
}, []);
// remove resize listener again on "componentWillUnmount"
useEffect(() => () => {
window.removeEventListener('resize', compareSize);
}, []);
// Define state and function to update the value
const [hoverStatus, setHover] = useState(false);
return (
<Tooltip
title={props.value}
interactive
disableHoverListener={!hoverStatus}
style={{fontSize: '2em'}}
>
<div
ref={textElementRef}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
{props.someLongText}
</div>
</Tooltip>
);
};
export default OverflowTip;
Please find the codesandbox below - https://codesandbox.io/s/material-demo-p2omr
I am using ref here to get the TableCell DOM Node and then comparing the scrollWidth and clientWidth to determine if Tooltip has to be displayed.(This is based on answer here )
I have added "rowref" (property that has the ref) and "open" (disable/enable tooltip) as new properties to the rows. I don't know where your data is coming from, but I am assuming you can add these properties to the row.
One more thing to note, I am only setting "disableHoverListener" prop to disable tooltip . There are other props - "disableFocusListener" & "disableTouchListener" , If you want to use those. More info here
Hope this works out for you. Let me know if you have any doubts in the code.
I ran into this same problem today and @vijay-menon's answer was very helpful. Here's a simple standalone component for the same thing:
import React, { Component } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
class OverflowTip extends Component {
constructor(props) {
super(props);
this.state = {
overflowed: false
};
this.textElement = React.createRef();
}
componentDidMount () {
this.setState({
isOverflowed: this.textElement.current.scrollWidth > this.textElement.current.clientWidth
});
}
render () {
const { isOverflowed } = this.state;
return (
<Tooltip
title={this.props.children}
disableHoverListener={!isOverflowed}>
<div
ref={this.textElement}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}>
{this.props.children}
</div>
</Tooltip>
);
}
}
Example usage:
<OverflowTip>
some long text here that may get truncated based on space
</OverflowTip>
The one nuisance is that if the space for the element dynamically changes in the page (eg page resize or dynamic DOM change) it won't acknowledge the new space and recompute whether it's overflowed.
Other tooltip libraries like Tippy have a method that's fired when trying to open the tooltip. That's a perfect place to do the overflow check because it'll always work, regardless if the DOM width had changed for the text element. Unfortunately it's fussier to do that with the API provided by Material UI.
based on benjamin.keen answer, this is the functional version of his code:
import React, { useRef, useState, useEffect } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
const OverflowTip = ({ children }) => {
const [isOverflowed, setIsOverflow] = useState(false);
const textElementRef = useRef();
useEffect(() => {
setIsOverflow(textElementRef.current.scrollWidth > textElementRef.current.clientWidth);
}, []);
return (
<Tooltip title={children} disableHoverListener={!isOverflowed}>
<div
ref={textElementRef}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{children}
</div>
</Tooltip>
);
};
I don't think you need to get into any side effect hooks. The top post suggests putting an event listener on the window which fires on every mouse move event. We can just define some callbacks and pass them to onMouseEnter
and onMouseLeave
import React, { useState, MouseEvent } from "react";
import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
export const OverflowTooltip = ({ children, ...props }: TooltipProps) => {
const [tooltipEnabled, setTooltipEnabled] = useState(false);
const handleShouldShow = ({ currentTarget }: MouseEvent<Element>) => {
if (currentTarget.scrollWidth > currentTarget.clientWidth) {
setTooltipEnabled(true);
}
};
const hideTooltip = () => setTooltipEnabled(false);
return (
<Tooltip
onMouseEnter={handleShouldShow}
onMouseLeave={hideTooltip}
disableHoverListener={!tooltipEnabled}
{...props}
>
<div
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{children}
</div>
{children}
</Tooltip>
);
};
based on @Dheeraj answer - this is the very close to his component but in type script version and more makes sense props names:
import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
interface Props {
tooltip: string;
text: string;
}
const OverflowTooltip = (props: Props) => {
const textElementRef = useRef<HTMLInputElement | null>(null);
const compareSize = () => {
const compare =
textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
setHover(compare);
};
useEffect(() => {
compareSize();
window.addEventListener('resize', compareSize);
}, []);
useEffect(() => () => {
window.removeEventListener('resize', compareSize);
}, []);
const [hoverStatus, setHover] = useState(false);
return (
<Tooltip
title={props.tooltip}
interactive
disableHoverListener={!hoverStatus}
>
<div
ref={textElementRef}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{props.text}
</div>
</Tooltip>
);
};
export default OverflowTooltip;
and we use it like this:
<OverflowTooltip
tooltip={'tooltip message here'}
text={'very long text here'}
/>
If someone needs a TypScript version:
import { Tooltip, Typography, TypographyProps } from "@mui/material";
import { FC, ReactChild, useEffect, useRef, useState } from "react";
export interface OverflowTypograpyProps extends TypographyProps {
children: ReactChild;
}
export const OverflowTypograpy: FC<OverflowTypograpyProps> = ({
children,
...props
}) => {
const ref = useRef<HTMLSpanElement>(null);
const [tooltipEnabled, setTooltipEnabled] = useState(false);
useEffect(() => {
const compareSize = () => {
if (ref.current) {
const compare = ref.current.scrollWidth > ref.current.clientWidth;
setTooltipEnabled(compare);
}
};
compareSize();
window.addEventListener("resize", compareSize);
return () => window.removeEventListener("resize", compareSize);
}, []);
return (
<Tooltip title={children} disableHoverListener={!tooltipEnabled}>
<Typography
ref={ref}
noWrap
overflow="hidden"
textOverflow="ellipsis"
{...props}
>
{children}
</Typography>
</Tooltip>
);
};
The method of defining whether the text is overflowed has a flaw in the accepted answer. Since scrollWidth<\/code> and
clientWidth<\/code> return rounded integer values, when the difference between them is small, then we will get equal values and tooltip won't work.
The problem is that ellipsis is also counted as
clientWidth<\/code> , so when we have an overflow of just one or tho characters, we will see ellipsis, but
scrollWidth<\/code> and
clientWidth<\/code> would be equal.
Below is the solution which worked for me to determine
scrollWidth<\/code> and
clientWidth<\/code> with fractional accuracy and fixed this issue:
import React, { useRef, useState, useEffect } from 'react';
import { Tooltip } from '@material-ui/core';
const OverflowTooltip = ({ children }) => {
const textElementRef = useRef();
const checkOverflow = () => {
// Using getBoundingClientRect, instead of scrollWidth and clientWidth, to get width with fractional accuracy
const clientWidth = textElementRef.current.getBoundingClientRect().width
textElementRef.current.style.overflow = 'visible';
const contentWidth = textElementRef.current.getBoundingClientRect().width
textElementRef.current.style.overflow = 'hidden';
setIsOverflow(contentWidth > clientWidth);
}
useEffect(() => {
checkOverflow();
window.addEventListener('resize', checkOverflow)
return () => {
window.removeEventListener('resize', checkOverflow)
}
}, []);
const [isOverflowed, setIsOverflow] = useState(false);
return (
<Tooltip title={children} disableHoverListener={!isOverflowed}>
<span ref={textElementRef}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{children}
</span>
</Tooltip>
);
};
export default OverflowTooltip
If you want to show the tooltip only if the content overflows this will work.
interface MyInterface {
content: Content;
}
export const MyComponent: React.FC<MyInterface> = ({ content }) => {
const ref = useRef(null);
const [showTooltip, setShowTooltip] = useState(false);
useEffect(() => {
if (!ref.current) return;
const div = ref.current as HTMLDivElement;
const isOverflow = div.offsetWidth < div.scrollWidth;
setShowTooltip(isOverflow);
}, []);
const renderContent = () => (
<div ref={ref}>
content
</div>
);
return (
<>
{ref.current && showTooltip ? (
<Tooltip title={content.value}>
{renderContent()}
</Tooltip>
) : (
renderContent()
)}
</>
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.