LoopOS UI v1.1.26.2

Previews

No matching results.

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
36
37
38
<div class="flex flex-row gap-2 mt-8">
  <span class="lui-icon_tooltip">
    <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
      <div class="lui-tooltip__title">
        teste logo
      </div>
    </div>
    <div class="lui-logo">
      <div data-react-class="LogoApp" data-react-props="{"app":"manager","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
      <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
        <span class="lui-counter__text">2</span>
      </span>
    </div>
  </span>
  <span class="lui-icon_tooltip">
    <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
      <div class="lui-tooltip__title">
        teste icon
      </div>
    </div>
    <div class="lui-icon h-[16px] w-[16px]">
      <i class="fa-regular fa-face-smile lui-icon__icon" style="font-size: 16px; color: black;"></i>
      <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
        <span class="lui-counter__text">2</span>
      </span>
    </div>
  </span>
</div>

IconTooltip

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
<div class="flex flex-row gap-2 mt-8">
    <%= render LooposUi::IconTooltip.new(app: "manager", count: "2", text: "teste logo") %>
    <%= render LooposUi::IconTooltip.new(icon: "fa-regular fa-face-smile", count: "2", text: "teste icon") %>
</div>

No notes provided.

No params configured.

Description

IconTooltip is a component that allows the user to create Icons with Tooltips on them, grouping them up. The tooltip is a simple one, that will be positioned on top of the icon

Arguments

Property Default Description
text This is a tooltip Text of the tooltip
icon nil Icon that will be used
app nil App Logo. If used, it will replace the icon with the logo of the chosen app
count nil Number that will be displayed in a counter next to the tooltip
size nil Size of the icon in pixels

Slots

custom_tooltip - If you want to use your own tooltip, mainly when you want to use the Tooltip component slots, you can use the custom_tooltip slot to render your own tooltip.