React-tooltip: How to show a tooltip initially on page load until onMouseEnter?

[alex-cory]

Basically I'm looking for a feature like this.

<ReactTooltip showInitial />

Any way to do this currently on page load?

[alex-cory]

Actually I just wrapped your library and added this feature for myself. If you're curious here's how I did it.

import React, { Component } from 'react'

import ReactTooltip from 'react-tooltip'



export default class Tooltip extends Component {

  componentDidMount () {
    if (this.props.showInitial) {
      this.showTooltip()
    }
  }

  showTooltip () {
    let tooltip = document.querySelectorAll(`[data-tip][data-for="${this.props.id}"]`)[0]
    ReactTooltip.show(tooltip)
  }

  render () {
    const { children, showInitial, ...props } = this.props
    if (!children) return null

    return (
      <ReactTooltip {...props}>
        {children}
      </ReactTooltip>
    )
  }
}

[juhil-s-crest]

Actually I just wrapped your library and added this feature for myself. If you're curious here's how I did it.

import React, { Component } from 'react'

import ReactTooltip from 'react-tooltip'



export default class Tooltip extends Component {

  componentDidMount () {
    if (this.props.showInitial) {
      this.showTooltip()
    }
  }

  showTooltip () {
    let tooltip = document.querySelectorAll(`[data-tip][data-for="${this.props.id}"]`)[0]
    ReactTooltip.show(tooltip)
  }

  render () {
    const { children, showInitial, ...props } = this.props
    if (!children) return null

    return (
      <ReactTooltip {...props}>
        {children}
      </ReactTooltip>
    )
  }
}

Good Solution.!