reactjs - react-tooltip，tooltip移动到下一个组件，给组件两个tooltip

Question

我有多个图标，每个图标都有一个独特的工具提示建议。这些图标会随着时间而变化，因此需要更新生成的工具提示。但是，当图标发生变化时，几乎就像工具提示找不到图标一样，因此会锁定最近的图标，以便它可以存在于某个地方。结果是 1 个图标有 2 个工具提示，而另一个图标没有工具提示。这是我的反应代码

AnswerStatusIcon.js

import React, { useEffect, useState } from 'react'
import * as Icon from 'react-feather'
import ReactTooltip from 'react-tooltip'

function answered(){
  return(
    <div className="mx-auto">
      <Icon.Check
        className="w-5 h-5 text-theme-9 mx-auto"
        data-for="1"
        data-tip=""
      />
      <ReactTooltip place="left" id="1">
        Question is answered
      </ReactTooltip>
    </div>
  )
}
function notAnswered(){
  return(
    <div className="mx-auto">
      <Icon.AlertTriangle
        className="w-5 h-5 text-theme-12 mx-auto"
        data-for="2"
        data-tip=""
      />
      <ReactTooltip place="left" id="2">
        Question was skipped
      </ReactTooltip>
    </div>
  )
}
function marked() {
  return(
    <div className="mx-auto">
      <Icon.Crosshair
        className="w-5 h-5 text-theme-11 mx-auto"
        data-for="3"
        data-tip=""
      />
      <ReactTooltip place="left" id="3">
        Question was NOT answered and marked for review
      </ReactTooltip>
    </div>
  )
}
function answeredAndMarked() {
  return(
    <div className="mx-auto">
      <Icon.UserCheck
        className="w-5 h-5 text-theme-9 mx-auto"
        data-for="4"
        data-tip=""
      />
      <ReactTooltip place="left" id="4">
        Question was answered AND marked for review
      </ReactTooltip>
    </div>
  )
}
function notVisited() {
  return( 
    <div className="mx-auto">
      <Icon.AlertCircle
        className="w-5 h-5 text-gray-600 mx-auto"
        data-for="5"
        data-tip=""
      />
      <ReactTooltip place="left" id="5">
        Haven't visited question yet
      </ReactTooltip>
    </div>
  )
}
function defaultStatus() {
  return(
    <div className="mx-auto">
      <Icon.AlertCircle
        className="w-5 h-5 text-gray-600 mx-auto"
        data-for="6"
        data-tip=""
      />
      <ReactTooltip place="left" id="6">
        Haven't visited question yet
      </ReactTooltip>
    </div>
  )
}

function AnswerStatusIcon(props) {

  if (props.answer && props.marked.includes(props.questionId)) {
    return answeredAndMarked()
  } else if (props.answer) {
    return answered()
  } else if (props.visited && props.marked.includes(props.questionId)) {
    return marked()
  } else if (props.visited && props.currentQuestion === props.questionId) {
    return notVisited()
  }
  return defaultStatus
}
  
export { AnswerStatusIcon }

QuestionButton.js

import React, { useState, useEffect, useRef } from 'react'

import { AnswerStatusIcon } from './AnswerStatusIcons'

function QuestionButton(props) {
  const didMountRef = useRef(false);
  const [visited, setVisited] = useState(false)

  useEffect(() => {
    if (didMountRef.current) {
      if (props.currentQuestion === props.questionId) {
        setVisited(true)
      }
    } else didMountRef.current = true;
  }, [props.currentQuestion, props.questionId, visited])

  return (
    <div
      style={{ cursor: 'pointer' }}
      onClick={() => props.onClickQuestion(props.questionId)}
      className={
        'border text-gray-700 py-1 p-3 rounded relative font-medium mx-2' +
        (props.currentQuestion === props.questionId
          ? ' border-gray-700 bg-gray-200 text-gray-600'
          : ' border-gray-400')
      }
    >
      {props.questionId + 1}
      <AnswerStatusIcon
        answer={props.answer}
        marked={props.markedQuestions}
        questionId={props.questionId}
        visited={visited}
      />
    </div>
  )
}

export { QuestionButton }

Answer 1

这里真正的答案是使用 @reach/tooltip 库，我在 2 分钟内就搞定了...