I have multiple Icons, each with a unique tooltip advice. These Icons change over time, and so the resulting tooltip needs to be updated. However, when the Icon changes, it is almost as if the tooltip cannot find the icon, and so latches on to the nearest Icon so it can exist somewhere. The result is 1 icon has 2 tooltips and the other Icon has no tooltips. Here is my react code
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 }
