LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<div class="w-full h-full flex items-center justify-center">
  <div>
    <div data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
      <button popovertarget="popover-a2f8c39196d7e1ebc1a3-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_right" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
        <span class="lui-button lui-button--icon-only lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_right" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" popovertarget="popover-a2f8c39196d7e1ebc1a3-target">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-info" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
              progress_activity
            </i>
          </div>
        </span>
      </button>  
      <div id="popover-a2f8c39196d7e1ebc1a3-target" popover="auto" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
        <div class="bg-white lui-popover-inner absolute pointer-events-auto">
          <div class="w-[300px] h-[200px] relative lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
            <span class="absolute top-0 left-0">
              <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                <div class="lui-tooltip__title">
                  Hey a tooltip!
                </div>
              </div>
              Hover me
            </span>
            <span>
              <div data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
                <button popovertarget="popover-21ff5459c62a9f8323cb-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_right" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
                  <span class="lui-button lui-button--icon-only lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_right" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" popovertarget="popover-21ff5459c62a9f8323cb-target">
                    <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                      <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-info" data-lui--button-target="leadingIcon"></i></div>
                    </div>
            
                    <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                      <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
                        progress_activity
                      </i>
                    </div>
                  </span>
                </button>  
                <div id="popover-21ff5459c62a9f8323cb-target" popover="auto" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
                  <div class="bg-white lui-popover-inner absolute pointer-events-auto">
                    <div class="w-[300px] h-[200px] relative lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
                      <span class="absolute top-0 left-0">
                        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                          <div class="lui-tooltip__title">
                            Hey a tooltip!
                          </div>
                        </div>
                        Hover me
                      </span>
                      <span>
                        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                          <div class="lui-tooltip__title">
                            Hey a tooltip!
                          </div>
                        </div>
                        Hover me
                      </span>
                    </div>
                  </div>
                </div>
              </div>
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Popover

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="w-full h-full flex items-center justify-center">
  <div>
    <%= render LooposUi::Popover.new(position: :bottom_right, anchor: :top_left) do |popover|%>
      <%= popover.with_toggle_button(icon: :info) %>
      <%= popover.with_target do %>
        <%= render LooposUi::DummySlot.new(classes: "w-[300px] h-[200px] relative") do %>
          <span class="absolute top-0 left-0">
            <%= render LooposUi::Tooltip.new(title: "Hey a tooltip!") %>
            Hover me
          </span>
          <span>
            <%= render LooposUi::Popover.new(position: :bottom_right, anchor: :top_left) do |popover|%>
              <%= popover.with_toggle_button(icon: :info) %>
              <%= popover.with_target do %>
                <%= render LooposUi::DummySlot.new(classes: "w-[300px] h-[200px] relative") do %>
                  <span class="absolute top-0 left-0">
                    <%= render LooposUi::Tooltip.new(title: "Hey a tooltip!") %>
                    Hover me
                  </span>
                  <span>
                    <%= render LooposUi::Tooltip.new(title: "Hey a tooltip!") %>
                    Hover me
                  </span>
                <% end %>
              <% end %>
            <% end %>
          </span>
        <% end %>
      <% end %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.

Description

The Popover component is a container that can be toggled to show or hide its content. It is commonly used in conjunction with the ModelAssociationOverlay component. The content will be hidden by default, and when the user clicks on the button, the content will be shown.

Arguments

Property Default Description
id Generated Probably wont need to set it manually
position :bottom_left The position where the popover will be shown, relative to the toggle button.
mode :auto The mode of the popover. Can be :auto or :manual. If :auto, the popover will be shown on click. More notes bellow.
anchor :top_left The anchor for the target that will be attached to position.
anchor_selector nil The anchor element where the popover will be positioned. Defaults to the toggle slot
on_close nil Can be nil or :refresh. If :refresh, will refresh the page on close (with turbo target lui-main-layout).
open false Default state
rotate_toggle false Animates the toggle by rotating it by 180º when opening/closing the popover

Position values:

  • :top_left
  • :top_center
  • :top_right
  • :bottom_left (default)
  • :bottom_center
  • :bottom_right

Anchor values:

  • :top_left (default)
  • :top_right
  • :bottom_left
  • :bottom_right

Manual mode

When in manual mode, you're responsible for showing and hiding the popover. You can do so calling toggle, show and hide methods on the component instance.

Eg:

Slots

toggle - Slot for the toggle button. It is a required slot. It's a typed slot, you have two options:

  • with_toggle_button: Easy way, uses the Button component to create the toggle button.

  • with_custom_toggle: Hard way. If you use this, somewhere in your custom toggle must be button tag with the attributes provided by the Popover's component toggle_attributes instance method. If you want to use a LooposUI button, use button_attributes instead. Example:

    <%= render LooposUi::Popover.new do |popover| >
        <% popover.with_custom_toggle do >
            <%= tag.button(..., **popover.toggle_attributes) %>
            <%# OR %>
            <%= tag.input(..., **popover.toggle_attributes) %>
            <%# OR %>
            <%= render LooposUi::Button.new(..., **popover.button_attributes) %>
        <% end %>
    <% end %>

target - Any content you want to show when the Popover is open. It is a required slot.