1. Components
  2. popover

Popover

INput

Usage

Note that this component requires JS, by default we’re using @flexilla/tooltip component, else you can skip this step if you’ve already @flexilla/flexilla.

  1. Installation 

    npm i @flexilla/popover

  2. Usage

    You can globaly init all Popover/Tooltip or init separately every modal Element 
    import { Popover } from "@flexilla/popover"
// init modal for all Element with data-popover attribute
Popover.autoInit('[data-popover]')

Trigger on Hover 

<button data-popover-trigger data-popover-id="popover-example2" aria-controls="popper"
    class="flex items-center gap-x2 p2 rd-lg btn-white ui-btn-white text-fg-subtitle">
    <img src="/defaultavatar.webp" alt="avatar" width="640" height="427"
        class="size-9 rd-full object-cover">
    <div class="flex items-start flex-col">
        <h4 class="font-semibold text-fg-title">Johnkat MJ</h4>
        <span class="text-sm  text-fg-muted">FrontEnd Designer</span>
    </div>
</button>
<div aria-labelledby="popper" data-popover id="popover-example2" aria-hidden="true"
    class="u-fx-popper w60 p5 bg-bg-surface rd-md invisible op0 fx-open-op100 fx-open-visible space-y-2 shadow shadowgray2/30 dark-shadow-transparent flex flex-col items-center text-center">
    <img src="/defaultavatar.webp" alt="avatar" class="size-16 object-cover rd-full">
    <div class="space-y-0.5">
        <h4 class="text-fg-title font-semibold">John Doe</h4>
        <p class="text-fg text-sm">12k followers</p>
    </div>
    <button
        class="rd-full btn btn-md btn-solid btn-solid-primary text-white">
        Follow
    </button>
</div>
Prev
Progress

Progress bar for user.

Next
On this page