CODEWITHSUNDEEP
reactjsreact-reduxredux-form
Tricky spy
Tricky spy

Reputation: 101

How to use Tooltip in react-redux

I am new to react. I want to have a tool tip on the label

The following serves my request

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

I want to have the tooltip when we hover on the label pertained to checkbox

form


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

checkbox

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

How do I embed it to work. So that it would be useful for the fields as well ? Thanks in advance!

Upvotes: 0

Views: 2003

Answers (2)

costal oktopus
costal oktopus

Reputation: 329

Refrence of React-tooltip This will surely help you.

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

Upvotes: 1

Auskennfuchs
Auskennfuchs

Reputation: 1737

First off you should not wrap the label around the input element but set the for attribute to the correct id of the input. So when clicking the label the input gets focused. And to show a tooltip or start any other action use the standard javascript events onMouseEnter and onMouseLeave, set some state according to this and use this state as conditional rendering of the tooltip element:

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

This will also work when you're setting and using some redux state.

Upvotes: 0

Related Questions