Как скрыть подсказку после определенного времени

Question

Как скрыть всплывающую подсказку после 4 секунд реакции

Классы всплывающих подсказок, которые я использовал, работают нормально. Всплывающая подсказка отображается при наведении курсора на ярлык, а всплывающая подсказка исчезает при удалении от ярлыка. Я хочу показать всплывающую подсказку в течение 4 секунд при наведении курсора и скрыть ее после этого. Как сделать это в реакции?

     <Field
      name='termsAndConditions'
      label='Terms'
      component={Checkbox}
      hover={textOnTermsHover}//the text which is hovered
      time={timeAfterWhichItHide} // this is the amount of time 
                                 //the hover should display
    />




     export const Checkbox = (inputProps) => {
     const { input, label, hover, time } = inputProps
     const { name } = input

     return (
       <label className='checkbox-a'>
      <input {...input}  checked={checked} 
      type='checkbox' />
      <div className='checkbox-a__box' id={name} />

     <div>
     <p className='checkbox--links' tabindex='0' aria- 
     describedby='tooltip-cb class='tooltip'>
      <u>{label}</u>//label on whose hover the tooltip is 
     displayed
      <div role='tooltip' class='tooltip__content' id='tooltip- 
      cb-02'>{hover}</div> //the text which is hovered when on 
     label
    </p>
    </div>
    </label>
    )
   }

Answer 1

Вы должны добавить состояние в свой компонент, чтобы отслеживать, когда всплывающая подсказка должна быть показана или скрыта. Вот ваш код с отслеживанием состояния всплывающей подсказки и обработкой задержки. Обратите внимание, что для приведенного ниже кода требуется React@16.8.1 и выше, поскольку он использует новый API хуков.

//react@^16.8.1
import React, { useState, useRef, useEffect } from 'react';

export const Checkbox = (inputProps) => {
  const { input, label, hover, time } = inputProps
  const { name } = input
  const timeout = useRef(null) // to store a handle to timeout so that it can be cleared
  const [isShowing, setIsShowing] = useState(false) // tooltip show/hide state
  const handleMouseEnter = () => {
    // when mouse enters element
    if (!isShowing) {
      setIsShowing(true) // show tooltip
      timeout.current = setTimeout(() => setIsShowing(false), time) // schedule to hide tooltip
    }
  }
  const onMouseOut = () => {
     // when mouse leaves element
    if (isShowing) {
      setIsShowing(false) // hide tooltip
    }
    if (timeout.current) {
      clearTimeout(timeout.current) // cancel scheduled hiding of tooltip
      timeout.current = null
    }
  }
  useEffect(() => () => {
    // when component unmounts, clear scheduled hiding - nothing to hide by this point=)
    if (timeout.current) {
      clearTimeout(timeout.current)
      timeout.current = null
    }
  }, [])

  return (
    <label className='checkbox-a'>
      <input
        {...input}
        checked={checked} 
        type='checkbox'
      />
      <div className='checkbox-a__box' id={name} />
      <div>
        <p
          className='checkbox--links'
          tabindex='0'
          aria-describedby='tooltip-cb'
          className='tooltip'
          onMouseEnter={handleMouseEnter}
          onMouseOut={onMouseOut}
        >
          <u>{label}</u>
          {/* render tooltip conditionally */}
          {isShowing && <div
            role='tooltip'
            class='tooltip__content'
            id='tooltip-cb-02'
          >
            {hover}
          </div>}
        </p>
      </div>
    </label>
  )
}

В качестве альтернативы, это можно сделать с помощью компонента класса - дайте мне знать, если вы хотите пример этого. Надеюсь, это поможет!

Answer 2

Вы можете использовать transition-delay свойство, Вот демо .