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
39
40
41
<span>
  <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="right"
    data-tooltips-interactive-value="false"
  >
    <div class="lui-tooltip__title">
      This is a tooltip
    </div>
    <div class="lui-tooltip__description">
      Description of a tooltip
    </div>
    <div class="lui-tooltip__link">
      <a href=" ">Click here to know more about it</a>
    </div>
    <span id="lui-token_5793709857" class="lui-token  lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;">
      <i class="lui-token__icon fa-regular fa-regular fa-tag"></i>
      <span class="lui-token__text">Tag</span>
      <div class="lui-token__actions">
      </div>
    </span>
    <span id="lui-token_9912568611" class="lui-token  lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;">
      <i class="lui-token__icon fa-regular fa-regular fa-tag"></i>
      <span class="lui-token__text">Other Tag</span>
      <div class="lui-token__actions">
      </div>
    </span>
    <button class="lui-button lui-button--size-tiny lui-button--core--secondary w-fit w-fit" data-controller="lui--button">
      <span class="lui-button__text" data-lui--button-target="text">
        Button
      </span>
    </button>
    <button class="lui-button lui-button--size-tiny lui-button--core--secondary w-fit w-fit" data-controller="lui--button">
      <span class="lui-button__text" data-lui--button-target="text">
        Other Button
      </span>
    </button>
  </div>
  Hover me
</span>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span>
    <%= render LooposUi::Tooltip.new(title: "This is a tooltip", position: :right) do |tooltip| %>
        <% tooltip.with_link(name: "Click here to know more about it", href: " ") %>
        <% tooltip.with_tokens([
            {text: "Tag"},
            {text:"Other Tag"}]) %>
        <% tooltip.with_buttons([
            {text: "Button", href: " ", type: :secondary, size: :tiny},
            {text: "Other Button", href: " ", type: :secondary, size: :tiny}]) %>
        Description of a tooltip
    <% end %>
    Hover me
</span>

No notes provided.

No params configured.

Description

A simple 'Tooltip' component that display a tooltip when hovering an element.

Arguments

Property Default Description
title nil The title of the tooltip.
tippy_target_id Parent Element The id of the element that will trigger the acction to display the tooltip. Avoid using, it's best to just nest the tooltip inside the element you want.
position top The position of the tooltip. Possible values: top,top-start,top-end,right,right-start,right-end,bottom,bottom-start,bottom-end,left,left-start,left-end
interactive false Determines if the tooltip should be interactive or not.

For the content of the tooltip, we can use the following slots

Property Arguments Description
description Directly write the string The description of the tooltip. #Deprecated, use the default content slot instead
links name,href Links that are meant to be included in the tooltip
tokens TagToken component args LooposUI::Tokens that will be associated with the tooltip
buttons Button component args LooposUI::Buttons that will be included in the tooltip

How-to

The title property is mandatory. After rendering the tooltip, you can then add the intended content, using the slots mentioned above. The links, tags and buttons can be multiple, while the description is one and only.

Usage

Change the tooltip title dynamically

The tooltip listens to changes to the data-tooltip-title attribute of the target element it's attached to. Any changes to this data attribute will be reflected in the tooltip title.

Example usage:

<span id="target">
    <%= render LooposUi::Tooltip.new(title: "This is a tooltip") do |tooltip| %>
    Hover me
</span>
<div class="mt-10">
    <input id="tooltipChanger" type="text" placeholder="..."  >
    <script>
        const tooltipTarget = document.getElementById("target");
        const input = document.getElementById("tooltipChanger")
        input.addEventListener("input", ()=> {
            tooltipTarget.dataset.tooltipTitle = input.value;
        });
    </script>
</div>