Im trying to figure out how to create a side popup/banner similar to the popup that appears when right clicking and pressing search on a mac.

Im not really sure what to search or how to start, could someone show me what to do and push me in the right direction (preferably using tailwind but i can adapt)? Thanks in advance.

CodePudding user response：

it's called popovers, you can search any tailwind element or components site you'll find a lot

1. https://tailwind-elements.com/docs/standard/components/popover/
2. https://tailwinduikit.com/components/webapp/UI_element/popover
3. more in https://www.google.com/search?q=make popovers in tailwind

note: the code snippet have problems on cdn tailwind, it works on normal tailwind CLI one

var popoverTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new Popover(popoverTriggerEl);
});

<script src="https://cdn.tailwindcss.com"></script>
<div >
  <button type="button"  data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Click to toggle popover
  </button>
</div>
<!-- Required popper.js -->
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js" charset="utf-8"></script>