Подсказка не работает в списке должным образом

Мне нужно показать всплывающую подсказку по кнопкам, присутствующим в списках. На рисунке ниже вы можете увидеть группу кнопок (которыми будут управлять каждый раз, когда данные поступают из БД).

Но проблема в том, что на изображении ниже вы можете видеть, что кнопка в списках показывает всплывающую подсказку только на кнопках, присутствующих в первой строке, а при наведении курсора на кнопки из второй строки всплывающая подсказка не показывает подсказку.

Я хочу показать всплывающую подсказку для всех кнопок. Может кто подскажет, что я в этом сделал не так? Я добавил свой код под изображением.

Подсказка не работает в списке должным образом

{
  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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
    );
  });
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
234
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это связано с тем, что идентификаторы, используемые для запуска всплывающего окна, не уникальны при отображении списка элементов.

Вы можете решить эту проблему, добавив 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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
          &nbsp;&nbsp;
          <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>
    );
  });
}

Другие вопросы по теме