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
<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-c83896f8" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="inline-flex items-center px-2 py-1 text-xs whitespace-normal w-fit text-sky-700 dark:text-sky-200 bg-sky-500/15 dark:bg-sky-500/40 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="fill-current mr-1 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle icon-desc-circle"><title id="icon-title-circle">Circle</title>
            <desc id="icon-desc-circle">Circle icon</desc>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-c83896f8" 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-5aa716bb" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="inline-flex items-center px-2 py-1 text-xs whitespace-normal w-fit text-yellow-700 dark:text-yellow-200 bg-yellow-500/15 dark:bg-yellow-500/40 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="fill-current mr-1 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle icon-desc-circle"><title id="icon-title-circle">Circle</title>
            <desc id="icon-desc-circle">Circle icon</desc>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-5aa716bb" 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-761cd606" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="inline-flex items-center px-2 py-1 text-xs whitespace-normal w-fit text-rose-700 dark:text-rose-200 bg-rose-500/15 dark:bg-rose-500/40 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="fill-current mr-1 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle icon-desc-circle"><title id="icon-title-circle">Circle</title>
            <desc id="icon-desc-circle">Circle icon</desc>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-761cd606" 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-de08e575" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide">
        <span class="inline-flex items-center px-2 py-1 text-xs whitespace-normal w-fit text-emerald-700 dark:text-emerald-200 bg-emerald-500/15 dark:bg-emerald-500/40 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="fill-current mr-1 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle icon-desc-circle"><title id="icon-title-circle">Circle</title>
            <desc id="icon-desc-circle">Circle icon</desc>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span>Settings</span>
        </span></span><span id="tooltip-de08e575" 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-b06b1b3f" 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="flex relative justify-center items-center m-auto w-full">
            <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-b06b1b3f" 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-6b85680e" 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="flex relative justify-center items-center m-auto w-full">
            <div class="rui-button__icon mr-2 "></div>
            <div class="rui-button__text">Sign in with Twitter</div>
          </span></button>
      </span><span id="tooltip-6b85680e" 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.