如何固定侧面弹出窗口

Question

我试图弄清楚如何创建一个侧面弹出窗口/横幅，类似于在 Mac 上右键单击并按 search 时出现的弹出窗口。

我不确定要搜索什么或如何开始，有人可以告诉我该做什么并将我推向正确的方向（最好使用顺风，但我可以适应）？提前致谢。

Answer 1

它叫做popovers，你可以搜索任何你会发现很多顺风元素或组件的网站

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

注意：sn-p代码在cdn tailwind上有问题，在普通的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 class="flex justify-center flex-wrap">
  <button type="button" class="
          px-7
          py-3
          bg-red-600
          text-white
          font-medium
          text-sm
          leading-snug
          uppercase
          rounded
          shadow-md
          hover:bg-red-700 hover:shadow-lg
          focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0
          active:bg-red-800 active:shadow-lg
          transition
          duration-150
          ease-in-out
        " 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/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>