RapidRails UI Book
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<div class="flex flex-col gap-6 mb-6">
  <h2 class="text-lg font-semibold">Default Tooltip with different positions</h2>
  <div class="flex gap-8 items-center">
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-71b402d6" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="badge badge-info rounded-md" role="status" aria-label="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-700 dark:text-sky-400 order-last ms-1.5 me-0 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-cog icon-desc-cog"><title id="icon-title-cog">Cog</title>
            <desc id="icon-desc-cog">Cog icon</desc>
            <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
            <path d="M12 2v2"></path>
            <path d="M12 22v-2"></path>
            <path d="m17 20.66-1-1.73"></path>
            <path d="M11 10.27 7 3.34"></path>
            <path d="m20.66 17-1.73-1"></path>
            <path d="m3.34 7 1.73 1"></path>
            <path d="M14 12h8"></path>
            <path d="M2 12h2"></path>
            <path d="m20.66 7-1.73 1"></path>
            <path d="m3.34 17 1.73-1"></path>
            <path d="m17 3.34-1 1.73"></path>
            <path d="m11 13.73-4 6.93"></path>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-71b402d6" class="tooltip-text tooltip-top" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text top</span></span>
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-e289139b" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="badge badge-warning rounded-md" role="status" aria-label="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-orange-700 dark:text-orange-400 order-last ms-1.5 me-0 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-cog icon-desc-cog"><title id="icon-title-cog">Cog</title>
            <desc id="icon-desc-cog">Cog icon</desc>
            <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
            <path d="M12 2v2"></path>
            <path d="M12 22v-2"></path>
            <path d="m17 20.66-1-1.73"></path>
            <path d="M11 10.27 7 3.34"></path>
            <path d="m20.66 17-1.73-1"></path>
            <path d="m3.34 7 1.73 1"></path>
            <path d="M14 12h8"></path>
            <path d="M2 12h2"></path>
            <path d="m20.66 7-1.73 1"></path>
            <path d="m3.34 17 1.73-1"></path>
            <path d="m17 3.34-1 1.73"></path>
            <path d="m11 13.73-4 6.93"></path>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-e289139b" class="tooltip-text tooltip-right" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text right</span></span>
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-8ea8418c" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="badge badge-danger rounded-md" role="status" aria-label="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-rose-700 dark:text-rose-400 order-last ms-1.5 me-0 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-cog icon-desc-cog"><title id="icon-title-cog">Cog</title>
            <desc id="icon-desc-cog">Cog icon</desc>
            <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
            <path d="M12 2v2"></path>
            <path d="M12 22v-2"></path>
            <path d="m17 20.66-1-1.73"></path>
            <path d="M11 10.27 7 3.34"></path>
            <path d="m20.66 17-1.73-1"></path>
            <path d="m3.34 7 1.73 1"></path>
            <path d="M14 12h8"></path>
            <path d="M2 12h2"></path>
            <path d="m20.66 7-1.73 1"></path>
            <path d="m3.34 17 1.73-1"></path>
            <path d="m17 3.34-1 1.73"></path>
            <path d="m11 13.73-4 6.93"></path>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-8ea8418c" class="tooltip-text tooltip-bottom" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text bottom</span></span>
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-6e410fbf" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="badge badge-success rounded-md" role="status" aria-label="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-700 dark:text-emerald-400 order-last ms-1.5 me-0 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-cog icon-desc-cog"><title id="icon-title-cog">Cog</title>
            <desc id="icon-desc-cog">Cog icon</desc>
            <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
            <path d="M12 2v2"></path>
            <path d="M12 22v-2"></path>
            <path d="m17 20.66-1-1.73"></path>
            <path d="M11 10.27 7 3.34"></path>
            <path d="m20.66 17-1.73-1"></path>
            <path d="m3.34 7 1.73 1"></path>
            <path d="M14 12h8"></path>
            <path d="M2 12h2"></path>
            <path d="m20.66 7-1.73 1"></path>
            <path d="m3.34 17 1.73-1"></path>
            <path d="m17 3.34-1 1.73"></path>
            <path d="m11 13.73-4 6.93"></path>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-6e410fbf" class="tooltip-text tooltip-left" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text left</span></span>  </div>
</div>
<div class="flex flex-col gap-6">
  <h2 class="text-lg font-semibold">Tooltip with accessibility name and description in source code</h2>
  <div class="flex gap-8 items-end">
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-45f69bd2" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <button type="button" class="inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-200 text-center mr-2 rounded-full text-sm px-2 py-2 text-white bg-[#050708] hover:bg-[#050708]/90 dark:hover:bg-[#050708]/90" role="button" aria-label="Sign in with Apple" aria-hidden="false"><span class="rui-button__content">
            <div class="rui-button__icon mr-2 "><svg class="apple_logo w-4 h-4 shrink-0" name="apple logo" id="apple logo" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 18 21" stroke="currentColor" role="img" focusable="false" aria-labelledby="icon-title-apple_logo icon-desc-apple_logo"><title id="icon-title-apple_logo">Apple logo</title>
                <desc id="icon-desc-apple_logo">Apple logo icon</desc>
                <path fill="currentColor" d="M14.537 10.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.339.025-1.769-.794-3.3-.794s-2.009.769-3.275.82c-1.316.049-2.317-1.318-3.158-2.532C1.323 14.984.01 10.451 1.772 7.391a4.9 4.9 0 0 1 4.139-2.507c1.292-.025 2.511.869 3.3.869.789 0 2.271-1.075 3.828-.917A4.67 4.67 0 0 1 16.7 6.82a4.524 4.524 0 0 0-2.161 3.805M12.02 3.193A4.4 4.4 0 0 0 13.06 0a4.482 4.482 0 0 0-2.946 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"></path>
              </svg>
            </div>
            <div class="rui-button__text">Sign in with Apple</div>
          </span></button>
      </span><span id="tooltip-45f69bd2" class="tooltip-text tooltip-top" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text top with accessibility name and description<span class="sr-only">Click to sign in with Apple</span></span></span>
    <span class="tooltip" data-controller="tooltip"><span class="tooltip-trigger" tabindex="0" role="button" aria-describedby="tooltip-00e79125" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <button type="button" class="inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-200 text-center mr-2 rounded-full text-sm px-2 py-2 text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600" role="button" aria-label="Sign in with Twitter" aria-hidden="false"><span class="rui-button__content">
            <div class="rui-button__icon mr-2 "></div>
            <div class="rui-button__text">Sign in with Twitter</div>
          </span></button>
      </span><span id="tooltip-00e79125" class="tooltip-text tooltip-right" role="tooltip" aria-hidden="true" data-tooltip-target="text">Tooltip text right with accessibility name and description<span class="sr-only">Click to sign in with Twitter</span></span></span>  </div>
</div>
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
<div class="flex flex-col gap-6 mb-6">
  <h2 class="text-lg font-semibold">Default Tooltip with different positions</h2>
  <div class="flex gap-8 items-center">
    <%= rui_tooltip(text: "Tooltip text top", position: "top") do %>
      <%= rui_badge(status: :info, text: "Settings") do |badge| %>
        <% badge.with_icon(name: "cog", position: :trailing, color: :info)%>
      <% end %>
    <% end %>
    <%= rui_tooltip(text: "Tooltip text right", position: "right") do %>
      <%= rui_badge(status: :warning, text: "Settings") do |badge| %>
        <% badge.with_icon(name: "cog", position: :trailing, color: :warning)%>
      <% end %>
    <% end %>
    <%= rui_tooltip(text: "Tooltip text bottom", position: "bottom") do %>
      <%= rui_badge(status: :danger, text: "Settings") do |badge| %>
        <% badge.with_icon(name: "cog", position: :trailing, color: :danger)%>
      <% end %>
    <% end %>
    <%= rui_tooltip(text: "Tooltip text left", position: "left") do %>
      <%= rui_badge(status: :success, text: "Settings") do |badge| %>
        <% badge.with_icon(name: "cog", position: :trailing, color: :success)%>
      <% end %>
    <% end %>
  </div>
</div>
<div class="flex flex-col gap-6">
  <h2 class="text-lg font-semibold">Tooltip with accessibility name and description in source code</h2>
  <div class="flex gap-8 items-end">
    <%= rui_tooltip(text: "Tooltip text top with accessibility name and description", position: "top", description: "Click to sign in with Apple") do %>
      <%= rui_socialbutton(platform: 'apple', text: 'Sign in with Apple', shape: :pill, size: :sm) %>
    <% end %>
    <%= rui_tooltip(text: "Tooltip text right with accessibility name and description", position: "right", description: "Click to sign in with Twitter") do %>
      <%= rui_socialbutton(platform: 'x', text: 'Sign in with Twitter', shape: :pill, size: :sm) %>
    <% end %>
  </div>
</div>

Tooltip Overview

This preview showcases various types of tooltips with different positions and accessibility description:

  • Top: Tooltip with text on top
  • Right: Tooltip with text on right
  • Bottom: Tooltip with text on bottom
  • Left: Tooltip with text on left
  • With accessibilty description: Add accessibility description to the tooltip

How to use: Simply add the rui_tooltip component and pass the text and position options.

<%= rui_tooltip(text: "Tooltip text", position: "top") do %>
  <span class="text-gray-400 cursor-pointer dark:text-white">Tooltip on top</span>
<% end %>

How to add an accessibility description: Add the description option to the tooltip and pass the description as the value.

<%= rui_tooltip(text: "Tooltip text left", position: "left", description: "Click to open settings") do %>
  <%= rui_badge(status: :success, text: "Settings") do |badge| %>
    <% badge.with_icon(name: "cog", position: :trailing, color: :success)%>
  <% end %>
<% end %>

No params configured.