Popover

<button class="rhx-button rhx-button--brand" id="pop-click-trigger">
    Show Popover
</button>
<rhx-popover rhx-trigger="#pop-click-trigger" rhx-placement="bottom">
    <h4>Popover Title</h4>
    <p>This is a rich content popover. It supports
       <strong>HTML</strong>, images, and interactive elements.</p>
</rhx-popover>

<button class="rhx-button rhx-button--neutral" id="pop-hover-trigger">
    Hover Me
</button>
<rhx-popover rhx-trigger="#pop-hover-trigger"
             rhx-trigger-event="hover"
             rhx-placement="top">
    <p>This popover appears on hover.</p>
</rhx-popover>

<button id="pop-top">Top</button>
<rhx-popover rhx-trigger="#pop-top" rhx-placement="top">
    <p>Top placement</p>
</rhx-popover>

<button id="pop-bottom">Bottom</button>
<rhx-popover rhx-trigger="#pop-bottom" rhx-placement="bottom">
    <p>Bottom placement</p>
</rhx-popover>

<button id="pop-left">Left</button>
<rhx-popover rhx-trigger="#pop-left" rhx-placement="left">
    <p>Left placement</p>
</rhx-popover>

<button id="pop-right">Right</button>
<rhx-popover rhx-trigger="#pop-right" rhx-placement="right">
    <p>Right placement</p>
</rhx-popover>

<button class="rhx-button rhx-button--brand" id="pop-noarrow">
    No Arrow
</button>
<rhx-popover rhx-trigger="#pop-noarrow"
             rhx-placement="bottom"
             rhx-arrow="false">
    <p>This popover has no directional arrow.</p>
</rhx-popover>

<button class="rhx-button rhx-button--brand" id="user-card-trigger"
        hx-get="/Docs/Components/Popover?handler=UserCard"
        hx-target="#user-popover .rhx-popover__content"
        hx-trigger="click once">
    Load User Card
</button>
<rhx-popover id="user-popover"
             rhx-trigger="#user-card-trigger"
             rhx-placement="bottom">
    <p>Loading...</p>
</rhx-popover>