Мне нужно показать всплывающую подсказку по кнопкам, присутствующим в списках. На рисунке ниже вы можете увидеть группу кнопок (которыми будут управлять каждый раз, когда данные поступают из БД).
Но проблема в том, что на изображении ниже вы можете видеть, что кнопка в списках показывает всплывающую подсказку только на кнопках, присутствующих в первой строке, а при наведении курсора на кнопки из второй строки всплывающая подсказка не показывает подсказку.
Я хочу показать всплывающую подсказку для всех кнопок. Может кто подскажет, что я в этом сделал не так? Я добавил свой код под изображением.
{
Object.keys(chitties).map((key, index) => {
return (
<tr key = {key}>
<td>{index + 1}</td>
<td>{chitties[key].chittyName}</td>
<td>{moment(chitties[key].startDate).format("DD-MM-YYYY")}</td>
<td>{chitties[key].psoId}</td>
<td>{chitties[key].auctionDay}</td>
<td>{chitties[key].totalMonth}</td>
<td>{numberFormat(chitties[key].totalAmount)}</td>
<td>
<Link
to = {`/chitties/list/${this.props.match.params.id}/detail/${key}`}
>
<Button
color = "primary"
className = "btn-pill"
id = "UncontrolledTooltipExample"
>
<i className = "fa fa-eye" />
</Button>
<UncontrolledTooltip
placement = "top"
target = "UncontrolledTooltipExample"
>
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/list/${this.props.match.params.id}/edit/${key}`}>
<Button
color = "secondry"
className = "btn-pill"
id = "UncontrolledTooltip"
>
<i className = "fa fa-pencil" />
</Button>
<UncontrolledTooltip placement = "top" target = "UncontrolledTooltip">
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/${key}/addUser`}>
<Button
color = "success"
className = "btn-pill"
id = "UncontrolledToolti"
>
<i className = "fa fa-user-plus" />
</Button>
<UncontrolledTooltip placement = "top" target = "UncontrolledToolti">
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/${this.props.match.params.id}/auction/${key}`}>
<Button color = "danger" className = "btn-pill" id = "UncontrolledTool">
<i className = "fa fa-calendar-plus-o" />
</Button>
<UncontrolledTooltip placement = "top" target = "UncontrolledTool">
Hello world!
</UncontrolledTooltip>
</Link>
<Link
to = {`/chitties/${this.props.match.params.id}/paymentList/${key}`}
>
<Button color = "warning" className = "btn-pill" id = "Uncontrolle">
<i className = "fa fa-inr" />
</Button>
<UncontrolledTooltip placement = "down" target = "Uncontrolle">
Hello world!
</UncontrolledTooltip>
</Link>
</td>
</tr>
);
});
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Это связано с тем, что идентификаторы, используемые для запуска всплывающего окна, не уникальны при отображении списка элементов.
Вы можете решить эту проблему, добавив key, который вы используете, к указанным идентификаторам:
<Button
color = "primary"
className = "btn-pill"
id = {`tooltip1-${key}`}
>
<i className = "fa fa-eye" />
</Button>
<UncontrolledTooltip
placement = "top"
target = {`tooltip1-${key}`}
>
Полный код:
{
Object.keys(chitties).map((key, index) => {
return (
<tr key = {key}>
<td>{index + 1}</td>
<td>{chitties[key].chittyName}</td>
<td>{moment(chitties[key].startDate).format("DD-MM-YYYY")}</td>
<td>{chitties[key].psoId}</td>
<td>{chitties[key].auctionDay}</td>
<td>{chitties[key].totalMonth}</td>
<td>{numberFormat(chitties[key].totalAmount)}</td>
<td>
<Link
to = {`/chitties/list/${this.props.match.params.id}/detail/${key}`}
>
<Button
color = "primary"
className = "btn-pill"
id = {`tooltip1-${key}`}
>
<i className = "fa fa-eye" />
</Button>
<UncontrolledTooltip
placement = "top"
target = {`tooltip1-${key}`}
>
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/list/${this.props.match.params.id}/edit/${key}`}>
<Button
color = "secondry"
className = "btn-pill"
id = {`tooltip2-${key}`}
>
<i className = "fa fa-pencil" />
</Button>
<UncontrolledTooltip placement = "top" target = {`tooltip2-${key}`}>
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/${key}/addUser`}>
<Button
color = "success"
className = "btn-pill"
id = {`tooltip3-${key}`}
>
<i className = "fa fa-user-plus" />
</Button>
<UncontrolledTooltip placement = "top" target = {`tooltip3-${key}`}>
Hello world!
</UncontrolledTooltip>
</Link>
<Link to = {`/chitties/${this.props.match.params.id}/auction/${key}`}>
<Button color = "danger" className = "btn-pill" id = {`tooltip4-${key}`}>
<i className = "fa fa-calendar-plus-o" />
</Button>
<UncontrolledTooltip placement = "top" target = {`tooltip4-${key}`}>
Hello world!
</UncontrolledTooltip>
</Link>
<Link
to = {`/chitties/${this.props.match.params.id}/paymentList/${key}`}
>
<Button color = "warning" className = "btn-pill" id = "Uncontrolle">
<i className = "fa fa-inr" />
</Button>
<UncontrolledTooltip placement = "down" target = "Uncontrolle">
Hello world!
</UncontrolledTooltip>
</Link>
</td>
</tr>
);
});
}