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及更高版本，因为它使用了新的hooks 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属性，这里是demo。

Answer 3

您可以使用工具提示的 open 属性在 onMouseEnter 事件上设置超时，并将this.state.tooltipIsOpen设置为false进入类状态。

<Tooltip
  arrow
  title={<h6 className="my-auto">Manage Account</h6>}
  placement="bottom"
  style={{ color: "white", background: "transparent" }}
  open={this.state.tooltipIsOpen}
/>

特定时间后如何隐藏工具提示

3 个答案: