Ambiguous digitalized button

[florentianayuwono]

Based on user testing that said the button is a bit ambiguous since it does not redirect to any page.

I guess I will make it a default red or green color and nonclickable, so that user know that it is meant to be showing status of digitalization only.

[florentianayuwono]

@KamiliArsyad I need your help in this. So I think I decided to make it a popover instead. Like if you click the button it will have a little textbox popup that explain more about the digitalization. But then it seems that I cannot enable the popup to work. I noticed that for this page we kind of still use Bootstrap (?) so I choose to work the Bootstrap way.

First I have added the popper script (since for popover the kind of relying on popper.

<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
  integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
  crossorigin="anonymous"
>

Then I have also added this code inside the script:

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

And then finally for the button it will look something like this for the code:

        <button
          type="button"
          class={
            business.has_digitalized
              ? "btn btn-success"
              : "btn btn-danger"
          }
          data-bs-toggle="popover"
          data-bs-title="Digitalization status"
          data-bs-content={
            business.has_digitalized
              ? "Congrats! You are digitalized!"
              : "First next big step: digitalize your business!"
          }
        >
          {business.has_digitalized ? "Digitalized" : "Not Digitalized"}
        </button>

But somehow still cannot? I have followed the Bootstrap documentation and watch the tutorial, but it still cannot functions so I am wondering if there is some conflict? FYI I do this inside the new-features branch.

[KamiliArsyad]

I am not sure about Bootstrap, but shouldn't the button be wrapped inside an OverlayTrigger component? Also the button should be Bootstrap's button imported from react-bootstrap and not the default html button.
Btw are you sure the tutorial you're following is a React JS tutorial? Some syntaxes don't seem very familiar to me

[KamiliArsyad]

side note btw: Chakra's popover is far easier to code and it's only like a 3 minute code