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
<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" tooltip_placement="right" data-tooltip-placement="right" data-tooltip-target="vkuxhcahjv_target">
    Hover <i><b>right</b></i>
  </button>
  <div id="vkuxhcahjv_target" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700">        Tooltip <b>right</b>
    <div data-popper-arrow="true" class="tooltip-arrow"></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" tooltip_placement="bottom" data-tooltip-placement="bottom" data-tooltip-target="gsxhgxsjbl_target">
    Hover <i><b>bottom</b></i>
  </button>
  <div id="gsxhgxsjbl_target" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700">        Tooltip <b>bottom</b>
    <div data-popper-arrow="true" class="tooltip-arrow"></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" tooltip_text="Popover at left" tooltip_placement="left" tooltip_trigger="click" data-tooltip-placement="left" data-tooltip-trigger="click" data-tooltip-target="sufrpdwlrc_target">Click left</button>
  <div id="sufrpdwlrc_target" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700">Popover at left
    <div data-popper-arrow="true" class="tooltip-arrow"></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" tooltip_text="Popover at top" tooltip_placement="top" tooltip_trigger="click" data-tooltip-placement="top" data-tooltip-trigger="click" data-tooltip-target="evwztctxzd_target">Click top</button>
  <div id="evwztctxzd_target" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700">Popover at top
    <div data-popper-arrow="true" class="tooltip-arrow"></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', tooltip_placement: placement) do |button| %>
      <% button.with_tooltip do %>
        Tooltip <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}",
      tooltip_text: "Popover at #{placement}",
      tooltip_placement: placement,
      tooltip_trigger: :click
    ) %>
  <% end %>
</div>

No notes provided.

No params configured.