Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-col w-full items-center pt-[120px]">
  <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="top" data-popover-placement="top" data-popover-target="tplavfbhgx_target">
    Default Popover</b></i>
</button>
<div id="tplavfbhgx_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">      
    <p>And here's some amazing content. It's very engaging. Right?</p>
  </div>
  <div data-popper-arrow="true"></div>
</div>
</div>
1
2
3
4
5
6
7
8
<div class="flex flex-col w-full items-center pt-[120px]">
  <%= fx_button(class: 'relative inline-flex mr-2 mb-5 w-36', popover_placement: :top) do |button| %>
    <% button.with_popover(title: 'Popover Title') do %>
      <p>And here's some amazing content. It's very engaging. Right?</p>
    <% end %>
    Default Popover</b></i>
  <% end %>
</div>

No notes provided.

No params configured.