Fluxbit ViewComponents
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
<div class='m-12'>
  <div popover_placement="right" class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 p-1 text-xs h-fit px-2.5 py-0.5" data-popover-placement="right" data-popover-target="bliwqscaps_target">
    Hover <i><b>right</b></i>
  </div>
  <div id="bliwqscaps_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
    <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
      <h3 class="font-semibold text-gray-900 dark:text-white">Popover Title</h3>
    </div>
    <div class="px-3 py-2">        Popover at <b>right</b>
    </div>
    <div data-popper-arrow="true"></div>
  </div>
    
  <div popover_placement="bottom" class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 p-1 text-xs h-fit px-2.5 py-0.5" data-popover-placement="bottom" data-popover-target="lkjoifftqi_target">
    Hover <i><b>bottom</b></i>
  </div>
  <div id="lkjoifftqi_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
    <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
      <h3 class="font-semibold text-gray-900 dark:text-white">Popover Title</h3>
    </div>
    <div class="px-3 py-2">        Popover at <b>bottom</b>
    </div>
    <div data-popper-arrow="true"></div>
  </div>
  <div popover_text="Popover at left" popover_placement="left" popover_trigger="click" class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 p-1 text-xs h-fit px-2.5 py-0.5" data-popover-placement="left" data-popover-trigger="click" data-popover-target="bymixcaneu_target">Click left</div>
  <div id="bymixcaneu_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
    <div class="px-3 py-2">Popover at left</div>
    <div data-popper-arrow="true"></div>
  </div>
  <div popover_text="Popover at top" popover_placement="top" popover_trigger="click" class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 p-1 text-xs h-fit px-2.5 py-0.5" data-popover-placement="top" data-popover-trigger="click" data-popover-target="bqbfmnlien_target">Click top</div>
  <div id="bqbfmnlien_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
    <div class="px-3 py-2">Popover at top</div>
    <div data-popper-arrow="true"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class='m-12'>
  <% %i{right bottom}.each do |placement| %>
    <%= fx_badge(popover_placement: placement) do |button| %>
      <% button.with_popover(title: 'Popover Title') do %>
        Popover at <b><%= placement%></b>
      <% end %>
      Hover <i><b><%= placement%></b></i>
    <% end %>
  <% end %>
  <% %i{left top}.each do |placement| %>
    <%= fx_badge(
      with_content: "Click #{placement}",
      popover_text: "Popover at #{placement}",
      popover_placement: placement,
      popover_trigger: :click
    ) %>
  <% end %>
</div>

No notes provided.

No params configured.