From 49d3b900bfaf89531c6dd5e32f13f3317f180681 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 7 Aug 2025 15:28:45 -0500 Subject: [PATCH] Add tooltips to icon buttons --- app/assets/stylesheets/tooltips.css | 33 +++++++++++++++++++++++ app/helpers/accesses_helper.rb | 5 ++-- app/views/cards/container/_gild.html.erb | 4 +-- app/views/cards/container/_image.html.erb | 4 +-- app/views/cards/index.html.erb | 2 +- app/views/cards/pins/_pin_button.html.erb | 4 +-- app/views/cards/show.html.erb | 2 +- app/views/cards/watches/show.html.erb | 4 +-- 8 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 app/assets/stylesheets/tooltips.css diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css new file mode 100644 index 000000000..c206e8954 --- /dev/null +++ b/app/assets/stylesheets/tooltips.css @@ -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%; + } + } + } +} diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index d7f442114..92fc2240f 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -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 diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb index b3525f351..dc4298348 100644 --- a/app/views/cards/container/_gild.html.erb +++ b/app/views/cards/container/_gild.html.erb @@ -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" %> Demote to normal <% 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" %> Promote to golden <% end %> diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb index d08c68ed9..f809cb343 100644 --- a/app/views/cards/container/_image.html.erb +++ b/app/views/cards/container/_image.html.erb @@ -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" %> - Clear background image + Remove background image <% end %> <% elsif !card.closed? %> <%= form_with model: card, url: collection_card_path(card.collection, card), data: { controller: "form" } do |form| %> diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index 85dbf740a..377483dc6 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -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" %> Settings for <%= collection.name %> <% end %> diff --git a/app/views/cards/pins/_pin_button.html.erb b/app/views/cards/pins/_pin_button.html.erb index e08308829..c09e0e5f5 100644 --- a/app/views/cards/pins/_pin_button.html.erb +++ b/app/views/cards/pins/_pin_button.html.erb @@ -1,10 +1,10 @@
<% 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" %> Un-pin this card <% end %> <% else %> - <%= button_to card_pin_path(card), class: "btn" do %> + <%= button_to card_pin_path(card), class: "btn tooltip" do %> <%= icon_tag "unpinned" %> Pin this card <% end %> <% end %> diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index f2c74b1cb..fe7a192cb 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -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" %> Remove background image <% end %> diff --git a/app/views/cards/watches/show.html.erb b/app/views/cards/watches/show.html.erb index 90c0b9af9..1f845294c 100644 --- a/app/views/cards/watches/show.html.erb +++ b/app/views/cards/watches/show.html.erb @@ -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" %> Stop watching <% 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" %> Watch this <% end %>