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
<div class="m-12">
  <div tooltip_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-tooltip-placement="right" data-tooltip-target="madhfifdjz_target">
    Hover <i><b>right</b></i>
  </div>
  <div id="madhfifdjz_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>
    
  <div tooltip_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-tooltip-placement="bottom" data-tooltip-target="obrijrjlsj_target">
    Hover <i><b>bottom</b></i>
  </div>
  <div id="obrijrjlsj_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>
  <div tooltip_text="Popover at left" tooltip_placement="left" tooltip_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-tooltip-placement="left" data-tooltip-trigger="click" data-tooltip-target="snmjplwhkr_target">Click left</div>
  <div id="snmjplwhkr_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>
  <div tooltip_text="Popover at top" tooltip_placement="top" tooltip_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-tooltip-placement="top" data-tooltip-trigger="click" data-tooltip-target="fhdozhtyqn_target">Click top</div>
  <div id="fhdozhtyqn_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
<div class="m-12">
  <% %i{right bottom}.each do |placement| %>
    <%= fx_badge(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_badge(
      with_content: "Click #{placement}",
      tooltip_text: "Popover at #{placement}",
      tooltip_placement: placement,
      tooltip_trigger: :click
    ) %>
  <% end %>
</div>

No notes provided.

No params configured.