Open florentianayuwono opened 2 years ago
@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/core@2.11.5/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.
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
side note btw: Chakra's popover is far easier to code and it's only like a 3 minute code
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.