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
<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-f07d2f39" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide"> <span class="badge badge-info rounded-md badge-small" role="status" aria-label="Settings"> <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 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="M4.50073 11.9993C4.50073 16.1414 7.8586 19.4993 12.0007 19.4993C16.1429 19.4993 19.5007 16.1414 19.5007 11.9993M4.50073 11.9993C4.50073 7.85712 7.8586 4.49925 12.0007 4.49925C16.1429 4.49926 19.5007 7.85712 19.5007 11.9993M4.50073 11.9993L3.00073 11.9993M19.5007 11.9993L21.0007 11.9993M19.5007 11.9993L12.0007 11.9993M3.54329 15.0774L4.95283 14.5644M19.0482 9.43411L20.4578 8.92108M5.1062 17.785L6.25527 16.8208M17.7459 7.17897L18.895 6.21479M7.50064 19.7943L8.25064 18.4952M15.7506 5.50484L16.5006 4.2058M10.4378 20.8633L10.6983 19.386M13.303 4.61393L13.5635 3.13672M13.5635 20.8633L13.303 19.3861M10.6983 4.61397L10.4378 3.13676M16.5007 19.7941L15.7507 18.4951M7.50068 4.20565L12.0007 11.9993M18.8952 17.7843L17.7461 16.8202M6.25542 7.17835L5.10635 6.21417M20.458 15.0776L19.0485 14.5646M4.95308 9.43426L3.54354 8.92123M12.0007 11.9993L8.25073 18.4944" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <span>Settings</span> </span></span><span id="tooltip-f07d2f39" 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-5c64d964" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide"> <span class="badge badge-warning rounded-md badge-small" role="status" aria-label="Settings"> <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 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="M4.50073 11.9993C4.50073 16.1414 7.8586 19.4993 12.0007 19.4993C16.1429 19.4993 19.5007 16.1414 19.5007 11.9993M4.50073 11.9993C4.50073 7.85712 7.8586 4.49925 12.0007 4.49925C16.1429 4.49926 19.5007 7.85712 19.5007 11.9993M4.50073 11.9993L3.00073 11.9993M19.5007 11.9993L21.0007 11.9993M19.5007 11.9993L12.0007 11.9993M3.54329 15.0774L4.95283 14.5644M19.0482 9.43411L20.4578 8.92108M5.1062 17.785L6.25527 16.8208M17.7459 7.17897L18.895 6.21479M7.50064 19.7943L8.25064 18.4952M15.7506 5.50484L16.5006 4.2058M10.4378 20.8633L10.6983 19.386M13.303 4.61393L13.5635 3.13672M13.5635 20.8633L13.303 19.3861M10.6983 4.61397L10.4378 3.13676M16.5007 19.7941L15.7507 18.4951M7.50068 4.20565L12.0007 11.9993M18.8952 17.7843L17.7461 16.8202M6.25542 7.17835L5.10635 6.21417M20.458 15.0776L19.0485 14.5646M4.95308 9.43426L3.54354 8.92123M12.0007 11.9993L8.25073 18.4944" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <span>Settings</span> </span></span><span id="tooltip-5c64d964" 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-e888b848" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide"> <span class="badge badge-danger rounded-md badge-small" role="status" aria-label="Settings"> <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 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="M4.50073 11.9993C4.50073 16.1414 7.8586 19.4993 12.0007 19.4993C16.1429 19.4993 19.5007 16.1414 19.5007 11.9993M4.50073 11.9993C4.50073 7.85712 7.8586 4.49925 12.0007 4.49925C16.1429 4.49926 19.5007 7.85712 19.5007 11.9993M4.50073 11.9993L3.00073 11.9993M19.5007 11.9993L21.0007 11.9993M19.5007 11.9993L12.0007 11.9993M3.54329 15.0774L4.95283 14.5644M19.0482 9.43411L20.4578 8.92108M5.1062 17.785L6.25527 16.8208M17.7459 7.17897L18.895 6.21479M7.50064 19.7943L8.25064 18.4952M15.7506 5.50484L16.5006 4.2058M10.4378 20.8633L10.6983 19.386M13.303 4.61393L13.5635 3.13672M13.5635 20.8633L13.303 19.3861M10.6983 4.61397L10.4378 3.13676M16.5007 19.7941L15.7507 18.4951M7.50068 4.20565L12.0007 11.9993M18.8952 17.7843L17.7461 16.8202M6.25542 7.17835L5.10635 6.21417M20.458 15.0776L19.0485 14.5646M4.95308 9.43426L3.54354 8.92123M12.0007 11.9993L8.25073 18.4944" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <span>Settings</span> </span></span><span id="tooltip-e888b848" 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-f2c7a5c3" data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide"> <span class="badge badge-success rounded-md badge-small" role="status" aria-label="Settings"> <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 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="M4.50073 11.9993C4.50073 16.1414 7.8586 19.4993 12.0007 19.4993C16.1429 19.4993 19.5007 16.1414 19.5007 11.9993M4.50073 11.9993C4.50073 7.85712 7.8586 4.49925 12.0007 4.49925C16.1429 4.49926 19.5007 7.85712 19.5007 11.9993M4.50073 11.9993L3.00073 11.9993M19.5007 11.9993L21.0007 11.9993M19.5007 11.9993L12.0007 11.9993M3.54329 15.0774L4.95283 14.5644M19.0482 9.43411L20.4578 8.92108M5.1062 17.785L6.25527 16.8208M17.7459 7.17897L18.895 6.21479M7.50064 19.7943L8.25064 18.4952M15.7506 5.50484L16.5006 4.2058M10.4378 20.8633L10.6983 19.386M13.303 4.61393L13.5635 3.13672M13.5635 20.8633L13.303 19.3861M10.6983 4.61397L10.4378 3.13676M16.5007 19.7941L15.7507 18.4951M7.50068 4.20565L12.0007 11.9993M18.8952 17.7843L17.7461 16.8202M6.25542 7.17835L5.10635 6.21417M20.458 15.0776L19.0485 14.5646M4.95308 9.43426L3.54354 8.92123M12.0007 11.9993L8.25073 18.4944" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <span>Settings</span> </span></span><span id="tooltip-f2c7a5c3" 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-4d4019f1" 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="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 21" role="img" focusable="false" aria-labelledby="icon-title-apple icon-desc-apple"><title id="icon-title-apple">Apple</title> <desc id="icon-desc-apple">Apple icon</desc> <path 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-4d4019f1" 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-bf730bee" 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-[#1da1f2] hover:bg-[#1da1f2]/90 dark:hover:bg-[#1da1f2]/90" role="button" aria-label="Sign in with Twitter" aria-hidden="false"><span class="rui-button__content"> <div class="rui-button__icon mr-2 "><svg class="rr_social_button w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-x icon-desc-x"><title id="icon-title-x">X</title> <desc id="icon-desc-x">X icon</desc> <path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z"></path> </svg> </div> <div class="rui-button__text">Sign in with Twitter</div> </span></button> </span><span id="tooltip-bf730bee" 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.