Я использую пользовательский интерфейс Chakra (подсказка и многоточие). Я добавил всплывающую подсказку, чтобы полностью отображать метку в заголовке, но я хочу, чтобы всплывающая подсказка отображалась ТОЛЬКО при активации многоточия!
Например, в обычной ситуации мне не нужен компонент всплывающей подсказки в тексте, а только когда есть многоточие.
Я ценю вашу помощь, спасибо
<Tooltip label = "this is an example for a long text">
<Text
style = {{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
this is an example for a long text
</Text>
</Tooltip>
Вы можете увидеть этот ответ: Обнаружение многоточия переполнения текста HTML
function isEllipsisActive(element) {
return (element.offsetWidth < element.scrollWidth);
}
Затем вы можете решить отобразить компонент всплывающей подсказки на основе результата этой функции.
const textRef = useRef()
<Text ref = {textRef}/>
{isEllipsisActive(textRef) && (<Tooltip></Tooltip)}
Я создал свой собственный компонент под названием CustomTooltip.
export const CustomTooltip = ({
ariaLabel,
label,
children,
styles,
placement,
}: CustomTooltipProps) => {
const ref = useRef<HTMLParagraphElement>(null)
const [isOverflown, setIsOverflown] = useState(false)
const compareSize = () => {
const node = ref.current!
setIsOverflown(node.scrollWidth > node.clientWidth)
}
useEffect(() => {
compareSize()
window.addEventListener('resize', compareSize)
return () => {
window.removeEventListener('resize', compareSize)
}
}, [])
return (
<Tooltip
aria-label = {ariaLabel}
label = {label}
placement = {placement}
isDisabled = {!isOverflown}
>
<Text sx = {styles} ref = {ref} isTruncated>
{children}
</Text>
</Tooltip>
)
}
затем я вызываю его в другом компоненте.
<CustomTooltip
styles = {{color:"#FFFFFF"}}
label = "this is a Tooltip"
placement='bottom-start'
aria-label = "this is a Tooltip"
>
this is a Tooltip
</CustomTooltip>