bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tooltips to icon buttons

Browse Source
This commit is contained in:
Andy Smith
2025-08-07 15:28:45 -05:00
parent fdcfbcf9f1
commit 49d3b900bf
8 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/tooltips.css
+33
View File
@@ -0,0 +1,33 @@
@layer components {
.tooltip {
--tooltip-delay: 750ms;
--tooltip-duration: 150ms;
.for-screen-reader {
background: var(--color-ink);
border-radius: 0.5ch;
color: var(--color-canvas);
font-size: var(--text-x-small);
font-weight: normal;
inset: -1ch auto auto 50%;
max-inline-size: 28ch;
opacity: 0;
padding: 0.25ch 1ch;
transition: var(--tooltip-duration) ease-out allow-discrete;
transition-property: opacity, translate;
translate: -50% -85%;
text-overflow: ellipsis;
}
@media(any-hover: hover) {
&:hover .for-screen-reader {
block-size: auto !important;
clip-path: none !important;
inline-size: auto !important;
opacity: 1;
transition-delay: var(--tooltip-delay);
translate: -50% -100%;
}
}
}
}
app/helpers/accesses_helper.rb
+2 -3
View File
@@ -18,9 +18,8 @@ module AccessesHelper
turbo_frame_tag dom_id(collection, :involvement_button) do
button_to collection_involvement_path(collection), method: :put,
aria: { labelledby: dom_id(collection, :involvement_label) },
class: [ "btn", { "btn--reversed": access.involvement == "watching" || access.involvement == "everything" } ],
params: { involvement: next_involvement(access.involvement) },
title: involvement_access_label(collection, access.involvement) do
class: [ "btn tooltip", { "btn--reversed": access.involvement == "watching" || access.involvement == "everything" } ],
params: { involvement: next_involvement(access.involvement) } do
icon_tag("notification-bell-#{access.involvement.dasherize}") +
tag.span(involvement_access_label(collection, access.involvement), class: "for-screen-reader", id: dom_id(collection, :involvement_label))
end
app/views/cards/container/_gild.html.erb
+2 -2
View File
@@ -1,10 +1,10 @@
<% if card.golden? %>
<%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed" do %>
<%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed tooltip" do %>
<%= icon_tag "golden-ticket" %>
<span class="for-screen-reader">Demote to normal</span>
<% end %>
<% else %>
<%= button_to card_goldness_path(card), class: "btn" do %>
<%= button_to card_goldness_path(card), class: "btn tooltip" do %>
<%= icon_tag "golden-ticket" %>
<span class="for-screen-reader">Promote to golden</span>
<% end %>
app/views/cards/container/_image.html.erb
+2 -2
View File
@@ -1,7 +1,7 @@
<% if card.image.attached? %>
<%= button_to card_image_path(card), method: :delete, class: "btn" do %>
<%= button_to card_image_path(card), method: :delete, class: "btn tooltip" do %>
<%= icon_tag "picture-remove" %>
<span class="for-screen-reader">Clear background image</span>
<span class="for-screen-reader">Remove background image</span>
<% end %>
<% elsif !card.closed? %>
<%= form_with model: card, url: collection_card_path(card.collection, card), data: { controller: "form" } do |form| %>
app/views/cards/index.html.erb
+1 -1
View File
@@ -28,7 +28,7 @@
<% if collection = @filter.single_collection %>
<%= access_involvement_advance_button collection, Current.user %>
<%= link_to edit_collection_path(collection), class: "btn" do %>
<%= link_to edit_collection_path(collection), class: "btn tooltip" do %>
<%= icon_tag "settings" %>
<span class="for-screen-reader">Settings for <%= collection.name %></span>
<% end %>
app/views/cards/pins/_pin_button.html.erb
+2 -2
View File
@@ -1,10 +1,10 @@
<div id="<%= dom_id(card, :pin_button) %>">
<% if card.pinned_by? Current.user %>
<%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed" do %>
<%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed tooltip" do %>
<%= icon_tag "pinned" %> <span class="for-screen-reader">Un-pin this card</span>
<% end %>
<% else %>
<%= button_to card_pin_path(card), class: "btn" do %>
<%= button_to card_pin_path(card), class: "btn tooltip" do %>
<%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card</span>
<% end %>
<% end %>
app/views/cards/show.html.erb
+1 -1
View File
@@ -51,7 +51,7 @@
<%= render "layouts/lightbox" do %>
<% if @card.image.attached? %>
<%= button_to card_image_path(@card), method: :delete, class: "btn" do %>
<%= button_to card_image_path(@card), method: :delete, class: "btn tooltip" do %>
<%= icon_tag "trash" %>
<span class="for-screen-reader">Remove background image</span>
<% end %>
app/views/cards/watches/show.html.erb
+2 -2
View File
@@ -1,11 +1,11 @@
<%= turbo_frame_tag dom_id(@card, :watch) do %>
<% if @card.watched_by? Current.user %>
<%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed" do %>
<%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed tooltip" do %>
<%= icon_tag "bell" %>
<span class="for-screen-reader">Stop watching</span>
<% end %>
<% else %>
<%= button_to card_watch_path(@card), class: "btn" do %>
<%= button_to card_watch_path(@card), class: "btn tooltip" do %>
<%= icon_tag "bell-off" %>
<span class="for-screen-reader">Watch this</span>
<% end %>