Popover

Basic Usage

Create a popover with a trigger and body content using slots.

<%= rui_popover do |p| %>
  <% p.with_trigger do %>
    <span>Hover over me</span>
  <% end %>
  <% p.with_body do %>
    <p>This is the popover content.</p>
  <% end %>
<% end %>

Structured Content

Use header, body, and footer slots for consistent card-like layouts.

<%= rui_popover(width: :lg) do |p| %>
  <% p.with_trigger do %>
    <%= rui_badge(text: "User Profile", color: :blue, size: :lg) %>
  <% end %>
  <% p.with_header do %>
    <div class="flex items-center gap-3">
      <%= rui_avatar(initials: "JD", size: :lg, color: :blue) %>
      <div>
        <%= rui_text("Jane Doe", weight: :semibold) %>
        <%= rui_text("@janedoe", size: :sm, color: :muted) %>
      </div>
    </div>
  <% end %>
  <% p.with_body do %>
    <%= rui_text("Bio text...", color: :muted) %>
    <div class="flex gap-4 mt-2">
      <%= rui_text(size: :sm, color: :muted) do %>
        <%= rui_text("128", weight: :bold, color: :default) %> Following
      <% end %>
      <%= rui_text(size: :sm, color: :muted) do %>
        <%= rui_text("1.2K", weight: :bold, color: :default) %> Followers
      <% end %>
    </div>
  <% end %>
  <% p.with_footer do %>
    <%= rui_button("Message", size: :sm, variant: :outline) do |btn| %>
      <% btn.with_icon(:mail) %>
    <% end %>
    <%= rui_button("Follow", size: :sm, color: :primary) do |btn| %>
      <% btn.with_icon(:user_plus) %>
    <% end %>
  <% end %>
<% end %>

Custom Content

Use the custom_content slot for complete layout control.

<%= rui_popover(width: :xl) do |p| %>
  <% p.with_trigger do %>Hover me<% end %>
  <% p.with_custom_content do %>
    <div class="grid grid-cols-2 gap-4 p-4">
      <div>Column 1 content</div>
      <div>Column 2 content</div>
    </div>
  <% end %>
<% end %>

Positions

Popovers can appear on any side of the trigger. The default is :bottom.

<%= rui_popover(position: :top) do |p| %>...<% end %>
<%= rui_popover(position: :right) do |p| %>...<% end %>
<%= rui_popover(position: :bottom) do |p| %>...<% end %>
<%= rui_popover(position: :left) do |p| %>...<% end %>

Width Variants

Four fixed width variants plus custom max-width support.

<%= rui_popover(width: :sm) do |p| %>...<% end %>  
<%= rui_popover(width: :base) do |p| %>...<% end %> 
<%= rui_popover(width: :lg) do |p| %>...<% end %>  
<%= rui_popover(width: :xl) do |p| %>...<% end %>  

<%= rui_popover(max_width: "350px") do |p| %>...<% end %>

Colors

Popovers support default, dark, semantic colors, and all Tailwind colors.

Default and Dark

Semantic Colors

Tailwind Colors

<%= rui_popover(color: :default) do |p| %>...<% end %>
<%= rui_popover(color: :dark) do |p| %>...<% end %>
<%= rui_popover(color: :primary) do |p| %>...<% end %>
<%= rui_popover(color: :purple) do |p| %>...<% end %>

Arrow

Popovers can optionally show an arrow. Unlike tooltips, arrows are disabled by default.

<%= rui_popover(arrow: false) do |p| %>...<% end %>  
<%= rui_popover(arrow: true) do |p| %>...<% end %>   

Trigger Modes

Popovers can be triggered by hover (default) or click.

<%= rui_popover(trigger: :hover) do |p| %>...<% end %>  
<%= rui_popover(trigger: :click) do |p| %>...<% end %>  

Delays

Popovers have configurable show and hide delays. Default is 200ms show delay and 100ms hide delay.

<%= rui_popover(delay: 0, hide_delay: 0) do |p| %>...<% end %>
<%= rui_popover(delay: 200, hide_delay: 100) do |p| %>...<% end %>  
<%= rui_popover(delay: 500, hide_delay: 300) do |p| %>...<% end %>

Hover Interaction

For hover-triggered popovers, the popover stays open when you move your cursor into it. This allows interaction with buttons, links, and other elements inside.

With Other Components

Popovers work great with buttons, badges, avatars, and other RapidRailsUI components.

<%= rui_popover do |p| %>
  <% p.with_trigger do %>
    <%= rui_button("More Info", color: :primary) %>
  <% end %>
  <% p.with_body do %>...<% end %>
<% end %>

<%= rui_popover(width: :lg) do |p| %>
  <% p.with_trigger do %>
    <%= rui_avatar(initials: "JD", size: :md) %>
  <% end %>
  <% p.with_header do %>...<% end %>
  <% p.with_body do %>...<% end %>
  <% p.with_footer do %>...<% end %>
<% end %>

Presets

Ready-to-use popover designs inspired by popular platforms.

GitHub-style User Card

A user hovercard similar to GitHub's design.

Twitter/X-style User Card

A profile hovercard inspired by Twitter/X with banner and verified badge.

Link Preview Card

A link preview popover for articles and external links.

Repository Preview

A GitHub-style repository preview with stars, forks, and description.

<%= rui_popover(width: :lg, delay: 300) do |p| %>
  <% p.with_trigger do %>
    <%= rui_link("#", "@username", color: :blue) %>
  <% end %>
  <% p.with_custom_content do %>
    <div class="p-4 space-y-3">
      <div class="flex items-start gap-3">
        <%= rui_avatar(initials: "JD", size: :xl) %>
        <div>
          <%= rui_text("Jane Doe", weight: :semibold) %>
          <%= rui_text("@janedoe", size: :sm, color: :muted) %>
        </div>
      </div>
      <%= rui_text("Bio text here...", size: :sm, color: :muted) %>
      <%= rui_button("Follow", size: :sm, full: true) do |btn| %>
        <% btn.with_icon(:user_plus) %>
      <% end %>
    </div>
  <% end %>
<% end %>

JavaScript API

The popover uses the popup Stimulus controller for show/hide behavior with configurable delays.

Stimulus Actions

Trigger popover behavior from any element:

  
    Hover me
  
  

    Popover content here
  




  
    Click me
  
  

    Click outside or press Escape to close
  

Custom Events

Listen for popover lifecycle events:

// Listen for popover events
const popover = document.querySelector('[data-controller="popup"]')

// Prevent popover from showing conditionally
popover.addEventListener('popup:show', (event) => {
  if (someCondition) {
    event.preventDefault() // Popover won't show
    return
  }
  console.log('Popover showing', event.detail.trigger)
})

// Track visibility
popover.addEventListener('popup:shown', (event) => {
  console.log('Popover is now visible')
})

popover.addEventListener('popup:hidden', (event) => {
  console.log('Popover is now hidden')
})

Programmatic Control

Control the popover directly via Stimulus controller:

// Get the controller instance
const element = document.querySelector('[data-controller="popup"]')
const controller = this.application.getControllerForElementAndIdentifier(element, 'popup')

// Programmatic control
controller.show()   // Show with configured delay
controller.hide()   // Hide with configured delay
controller.toggle() // Toggle state

// Direct state manipulation via value
controller.openValue = true  // Show immediately
controller.openValue = false // Hide immediately

// Check current state
if (controller.openValue) {
  console.log('Popover is open')
}