Как использовать всплывающую подсказку в Reaction-Redux

Question

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

Следующее служит моей просьбе

  <div class="sds_sp_2xl sds-cb_font--primary">
    To see Tooltip positioned on the right,
    <a role="button" tabindex="0" aria-describedby="tooltip-cb-02" class="sds-cb_tooltip">
      hover over me.
      <div role="tooltip" class="sds-cb_tooltip__content sds-cb_tooltip__content--right" id="tooltip-cb-02">Contextual helper text</div>
    </a>
  </div>

Я хочу получить всплывающую подсказку, когда мы наводим курсор на ярлык, относящийся к флажку

Форма

             <Field
               name='checkMe'
               label='check'
               component={Checkbox}
               checked={checkMe}
              {...this.checkboxActions}
            />

флажок

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

  const className = 'sds-cb_checkbox-a__input'


  return (
    <label className='sds-cb_checkbox-a' >
      <input {...input} className={className} checked={checked} type='checkbox' />
      <div className='sds-cb_checkbox-a__box' id={name} />
      <span className='sds-cb_checkbox-a__label sds_font-size--14'>{label}</span>
    </label>
  )
}

Как мне встроить его в работу.Чтобы это было полезно и для полей?Заранее спасибо!

Answer 1

Refrence of React-подсказка Это, безусловно, поможет вам.

        class Tooltip extends React.Component {
         constructor(props) {
         super(props)

        this.state = {
          displayTooltip: false
        }
      }

      hideTooltip=()=>{
        this.setState({displayTooltip: false})

      }
      showTooltip=()=>{
        this.setState({displayTooltip: true})
      }

      render() {
        let message = this.props.message
        let position = this.props.position
        return (
          <span className='tooltip'
              onMouseLeave={this.hideTooltip}
            >
            {this.state.displayTooltip &&
            <div className={`tooltip-bubble tooltip-${position}`}>
              <div className='tooltip-message'>{message}</div>
            </div>
            }
            <span 
              className='tooltip-trigger'
              onMouseOver={this.showTooltip}
              >
              {this.props.children}
            </span>
          </span>
        )
      }
    }

    class App extends React.Component {
      render() {
        return (
          <div className='container'>
            <p>Here is a <Tooltip message={'Hello, I am a super cool 
             tooltip'} position={'top'}>tooltip</Tooltip> on top.</p>
          </div>
        )
      }
    }
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )

Answer 2

Прежде всего, вам не следует оборачивать метку вокруг элемента ввода, а устанавливать для атрибута for правильный идентификатор ввода. Таким образом, при нажатии на ярлык ввод фокусируется. А чтобы показать всплывающую подсказку или запустить любое другое действие, используйте стандартные события javascript onMouseEnter и onMouseLeave, задайте некоторое состояние в соответствии с этим и используйте это состояние в качестве условного рендеринга элемента подсказки:

<label for="someId" onMouseEnter={()=>this.setState({showTooltip:true})} onMouseLeave={()=>this.setState({showTooltip:false})}>Labeltext</label>
<input id="someId" .../>
{this.state.showTooltip && <div>Tooltip</div>}

Это также будет работать, когда вы устанавливаете и используете некоторое состояние редукции.