Tailwind CSS React Popover - Horizon UI

Our Popover component for Tailwind CSS & React is a small overlay of content that is used to demonstrate secondary information of any component when a user clicks it.

See below our simple Popover example that you can use in your web project.

import Popover from "components/popover";
 
export default function Example() {
  return (
      <Popover
        trigger={
          <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
            Open Popover
          </button>
        }
        content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>}
      />
  );
}

Popover Placement

You can change the position of the Popover component using the placement prop.

import Popover from "components/Popover";
 
<div className="mb-3 flex gap-3">
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Top
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="top"/>
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Top-Start
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="top-start"/>
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Top-End
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="top-end"/>
    
</div>
<div className="mb-3 flex gap-3">
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Right
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="right"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Right-Start
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="right-start"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Right-End
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="right-end"/>
  
</div>
<div className="mb-3 flex gap-3">
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Bottom
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="bottom"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Bottom-Start
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="bottom-start"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Bottom-End
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="bottom-end"/>
  
</div>
<div className="flex gap-3">
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Left
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="left"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Left-Start
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="left-start"/>
  
  <Popover
    trigger={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Left-End
      </button>
    }
    content={<p className="dark:text-white">This is a very beautiful popover, show some love.</p>} placement="left-end"/>
  
</div>

progress bar