Как использовать всплывающую подсказку в ReactJS, в JSX, без использования npm-модуля или response-bootstrap?

Question

Я использую bootstrap4 в проекте Reactjs, я установил bootstrap4, используя npm и указав путь к модулю в App.js, как

import 'bootstrap/dist/css/bootstrap.min.css';

, но при использовании всплывающей подсказки, используя inlineстиль для значка, я не могу дать атрибут data-toggle из-за - между ними и JSX считает, что это два разных компонента.

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

вот код этого кода.

<Link to={`contact/edit/${id}`}>
                  <i
                    className="fas fa-pencil-alt "
                    style={{
                      data-toggle="tooltip", data-placement="top", title="Tooltip-not-working!",
                      cursor: "pointer",
                      float: "right",
                      color: "green",
                      marginRight: "1rem"
                    }}
                  />
                </Link>

ошибка из-за неприсвоение атрибутов в виде одной строки.

моя кодовая ссылка GitHub.

Answer 1

Вы размещаете атрибут в неправильном месте.Атрибут style должен иметь только свойство camelCase, например marginTop, а не margin-top.и остальные реквизиты, которые вы передаете элемент должен быть таким же, как HTML.

<i data-toggle="Your Message" style={{marginTop: '5px'}} />

Answer 2

Это потому, что вы даете атрибуты через тег style.Это должно выглядеть так:

<i data-toggle="tooltip" data-placement="top" title="Tooltip-not-working!" style={{...}} />