Как я могу показывать всплывающую подсказку ТОЛЬКО при активации многоточия?

Я использую пользовательский интерфейс 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
203
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете увидеть этот ответ: Обнаружение многоточия переполнения текста 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>

Другие вопросы по теме