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

首先，您不应该在输入元素周围包裹标签，而应将for属性设置为输入的正确ID。因此，当单击标签时，输入将成为焦点。要显示工具提示或开始任何其他操作，请使用标准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>}

当您设置并使用某些redux状态时，这也将起作用。

Answer 2

React-tooltip的引用 这一定会对您有所帮助。

        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')
    )

如何在React-Redux中使用工具提示

2 个答案: