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
<div class="flex flex-col w-full items-center">
  <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36" popover_placement="right" data-popover-placement="right" data-popover-target="zdvqlejigw_target">
    Hover <i><b>right</b></i>
  </button>
  <div id="zdvqlejigw_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>
    <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36" popover_placement="bottom" data-popover-placement="bottom" data-popover-target="okubucxaot_target">
    Hover <i><b>bottom</b></i>
  </button>
  <div id="okubucxaot_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>
  <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36" popover_text="Popover at left" popover_placement="left" popover_trigger="click" data-popover-placement="left" data-popover-trigger="click" data-popover-target="bhswxlmeap_target">Click left</button>
  <div id="bhswxlmeap_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>
  <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36" popover_text="Popover at top" popover_placement="top" popover_trigger="click" data-popover-placement="top" data-popover-trigger="click" data-popover-target="qswmtbpyer_target">Click top</button>
  <div id="qswmtbpyer_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
20
21
<div class="flex flex-col w-full items-center">
  <% %i{right bottom}.each do |placement| %>
    <%= fx_button(class: 'relative inline-flex mr-2 mb-5 w-36', 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_button(
      class: 'relative inline-flex mr-2 mb-5 w-36',
      with_content: "Click #{placement}",
      popover_text: "Popover at #{placement}",
      popover_placement: placement,
      popover_trigger: :click
    ) %>
  <% end %>
</div>

No notes provided.

No params configured.