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
<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <div id="tippy_target_id">
    <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">
        This is a tooltip
      </div>
      <div class="lui-tooltip__description">
        Description of a tooltip
      </div>
      <a class="lui-button lui-button--size-tiny lui-button--core--secondary w-fit w-fit" data-controller="lui--button" href="#">
        <span class="lui-button__text" data-lui--button-target="text">
          Button
        </span>
      </a>
    </div>
    Hover me
  </div>
</div>
<div class="mt-10">
  <input id="tooltipChanger" type="text" placeholder="Write here to change the tooltip title">
  <script>
    const tooltipTarget = document.getElementById("tippy_target_id");
    const input = document.getElementById("tooltipChanger")
    input.addEventListener("input", ()=> {
      tooltipTarget.dataset.tooltipTitle = input.value;
    });
  </script>
</div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <div id="tippy_target_id">
    <%= render LooposUi::Tooltip.new(title: "This is a tooltip") do |tooltip| %>
      <% tooltip.with_button(text:"Button", href: "#", type: :secondary, size: :tiny) %>
      Description of a tooltip
    <% end %>
    Hover me
  </div>
</div>
<div class="mt-10">
  <input id="tooltipChanger" type="text" placeholder="Write here to change the tooltip title">
  <script>
    const tooltipTarget = document.getElementById("tippy_target_id");
    const input = document.getElementById("tooltipChanger")
    input.addEventListener("input", ()=> {
      tooltipTarget.dataset.tooltipTitle = input.value;
    });
  </script>
</div>

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>