yummy-guide-generic-administrate 0.8.3 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a6e8b69f0347b22f47b72cf96c4f99c0c398d58a8f118809735f7bafaee65e20
-  data.tar.gz: 37decc40a9672713935cd76fdea50ff20992e6e35298a8096c1ab7625209060b
+  metadata.gz: 18c6b70d901d111ee883c8217e15eb52d5f3b7d8d6c41ef95d371ac552a78afd
+  data.tar.gz: f6de376c7ebe6876384278c8e4993ceb23485267e30c6bcedc1087b26715e278
 SHA512:
-  metadata.gz: b3d6976869de3d91b3affb029c77195053e541513f5f8ebbe4279543dfea132cf2536ec0880d555e2112ea63178ac61140eea4bf43fb3b365f58951e9335aae9
-  data.tar.gz: 81db24d807a65056e6b9ce35c5f5240d30c370b11def34fb2ae6664c7404e850458cd9a6119de8602faf259fcbfe0d42872da16373a0154cdc81c28b0c5da496
+  metadata.gz: 16d507455a42dd056a00470296f2387ad9725f7c2fa89e9a92b42abbe825b6063eb48d34bd91e7ba468cea86458b0baaf8d6a92f3d8185cd80395d901619effc
+  data.tar.gz: 99b43545b341e94587d5f59ed3c2ab85a70759806c3048d37bc587ff25ec2c56bcd376ea68ee5b7f38fcc3d0f3368db9ae5f55a8d567e16a4cfc4785666e8eaf

data/README.md

@@ -43,6 +43,8 @@ bundle install
   - datetime フィルターや checkbox group の組み立てを補助する helper
 - `YummyGuide::Administrate::FilterControlsHelper`
   - dashboard の Field 型フィルター定義から Filter ボタンとモーダルフォームを描画する helper
+- `YummyGuide::Administrate::TooltipHelper`
+  - 管理画面内で補足説明 tooltip を描画する helper
 - `YummyGuide::Administrate::DatetimeInputHelper`
   - 管理画面フォーム用の date + time 入力 helper
 - `YummyGuide::Administrate::NumberInputHelper`
@@ -58,6 +60,7 @@ bundle install
   - `filter_form.js`
   - `sticky_left_columns.js`
   - `sticky_table_headers.js`
+  - `tooltips.js`
   - `components.css`
 - 共通 field
   - `YummyGuide::Administrate::Fields::JsonPrettyField`
@@ -109,12 +112,15 @@ class Admin::ApplicationController < Administrate::ApplicationController
   helper YummyGuide::Administrate::FilterControlsHelper
   helper YummyGuide::Administrate::FilterFormHelper
   helper YummyGuide::Administrate::NumberInputHelper
+  helper YummyGuide::Administrate::TooltipHelper
 end
 ```
 
 `NumberInputHelper` は `Administrate::ApplicationController` の view helper として
 自動適用されます。`Administrate::ApplicationController` を継承しない独自 admin
 controller で同じ挙動が必要な場合だけ、上記のように明示的に読み込んでください。
+`TooltipHelper` も `Administrate::ApplicationController` の view helper として
+自動適用されます。
 
 ### Collection partial
 
@@ -461,6 +467,30 @@ Admin/Administrate 画面では、`number_field` / `number_field_tag` を
 `range_field` / `range_field_tag` は対象外で、従来どおり `type="range"` として描画
 されます。raw HTML の `<input type="number">` は helper を通らないため対象外です。
 
+### Tooltip helper
+
+ラベルやボタンの横に補足説明用の tooltip アイコンを表示する場合は、
+`admin_tooltip` を使います。PC では hover / focus 時に表示し、モバイルではタップで
+表示・非表示を切り替えます。
+
+```erb
+<%= f.label :published_at %>
+<%= admin_tooltip("公開日時を過ぎると公開ページに表示されます。") %>
+```
+
+説明本文に改行などの HTML を含める場合は block を渡します。`text` 引数と block を
+同時に指定した場合は block が優先されます。
+
+```erb
+<%= admin_tooltip do %>
+  Add - 調整レコードを追加表示するようにします。<br>
+  Only - 調整レコードのみを表示します。
+<% end %>
+```
+
+block を使わない場合、tooltip 本文はテキストとして扱われ、HTML は描画しません。
+見た目と表示制御には `components.css` と `tooltips.js` の読み込みが必要です。
+
 ### Asset の読み込み
 
 この engine の asset はホストアプリ側で明示的に読み込んでください。
@@ -473,6 +503,7 @@ Admin/Administrate 画面では、`number_field` / `number_field_tag` を
 //= require yummy_guide_administrate/filter_form
 //= require yummy_guide_administrate/sticky_left_columns
 //= require yummy_guide_administrate/sticky_table_headers
+//= require yummy_guide_administrate/tooltips
 ```
 
 ```scss

data/app/assets/javascripts/yummy_guide_administrate/tooltips.js

@@ -0,0 +1,214 @@
+(function() {
+  var TRIGGER_SELECTOR = "[data-admin-tooltip-trigger='true']";
+  var TOOLTIP_ID = "admin-tooltip";
+  var TOOLTIP_CLASS = "admin-tooltip";
+  var VISIBLE_CLASS = "admin-tooltip--visible";
+  var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+  var EDGE_GAP = 8;
+  var OFFSET = 8;
+  var activeTrigger = null;
+  var hoveredTrigger = null;
+  var focusedTrigger = null;
+  var tooltipElement = null;
+
+  function isMobile() {
+    return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+  }
+
+  function closestTrigger(target) {
+    if (!target || !target.closest) return null;
+
+    return target.closest(TRIGGER_SELECTOR);
+  }
+
+  function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  function getTooltipElement() {
+    if (tooltipElement) return tooltipElement;
+
+    tooltipElement = document.createElement("div");
+    tooltipElement.id = TOOLTIP_ID;
+    tooltipElement.className = TOOLTIP_CLASS;
+    tooltipElement.setAttribute("role", "tooltip");
+    document.body.appendChild(tooltipElement);
+
+    return tooltipElement;
+  }
+
+  function tooltipContent(trigger) {
+    var contentId = trigger.getAttribute("data-admin-tooltip-content-id");
+    var template = contentId ? document.getElementById(contentId) : null;
+    if (template) {
+      return {
+        html: template.innerHTML,
+        text: ""
+      };
+    }
+
+    var text = trigger.getAttribute("data-admin-tooltip-text") || "";
+    return {
+      html: "",
+      text: text.trim() ? text : ""
+    };
+  }
+
+  function setTriggerState(trigger, expanded) {
+    if (!trigger) return;
+
+    trigger.setAttribute("aria-expanded", expanded ? "true" : "false");
+
+    if (expanded) {
+      trigger.setAttribute("aria-describedby", TOOLTIP_ID);
+    } else {
+      trigger.removeAttribute("aria-describedby");
+    }
+  }
+
+  function positionTooltip() {
+    if (!activeTrigger || !tooltipElement || !tooltipElement.classList.contains(VISIBLE_CLASS)) return;
+
+    var targetRect = activeTrigger.getBoundingClientRect();
+    tooltipElement.style.left = "0px";
+    tooltipElement.style.top = "0px";
+
+    var tooltipRect = tooltipElement.getBoundingClientRect();
+    var viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    var viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    var top = targetRect.top - tooltipRect.height - OFFSET;
+    var placement = "top";
+
+    if (top < EDGE_GAP) {
+      top = targetRect.bottom + OFFSET;
+      placement = "bottom";
+    }
+
+    top = clamp(top, EDGE_GAP, Math.max(EDGE_GAP, viewportHeight - tooltipRect.height - EDGE_GAP));
+
+    var left = targetRect.left + (targetRect.width / 2) - (tooltipRect.width / 2);
+    left = clamp(left, EDGE_GAP, Math.max(EDGE_GAP, viewportWidth - tooltipRect.width - EDGE_GAP));
+
+    var arrowMax = Math.max(10, tooltipRect.width - 10);
+    var arrowLeft = clamp(targetRect.left + (targetRect.width / 2) - left - 4, 10, arrowMax);
+
+    tooltipElement.style.left = Math.round(left) + "px";
+    tooltipElement.style.top = Math.round(top) + "px";
+    tooltipElement.style.setProperty("--admin-tooltip-arrow-left", Math.round(arrowLeft) + "px");
+    tooltipElement.setAttribute("data-admin-tooltip-placement", placement);
+  }
+
+  function showTooltip(trigger) {
+    var content = tooltipContent(trigger);
+    if (!content.html && !content.text) return;
+
+    if (activeTrigger && activeTrigger !== trigger) {
+      hideTooltip();
+    }
+
+    activeTrigger = trigger;
+    tooltipElement = getTooltipElement();
+    if (content.html) {
+      tooltipElement.innerHTML = content.html;
+    } else {
+      tooltipElement.textContent = content.text;
+    }
+    tooltipElement.classList.add(VISIBLE_CLASS);
+    setTriggerState(trigger, true);
+
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(positionTooltip);
+    } else {
+      positionTooltip();
+    }
+  }
+
+  function hideTooltip(trigger) {
+    if (trigger && activeTrigger !== trigger) return;
+
+    setTriggerState(activeTrigger, false);
+
+    if (tooltipElement) {
+      tooltipElement.classList.remove(VISIBLE_CLASS);
+    }
+
+    activeTrigger = null;
+  }
+
+  function toggleTooltip(trigger) {
+    if (activeTrigger === trigger && tooltipElement && tooltipElement.classList.contains(VISIBLE_CLASS)) {
+      hideTooltip(trigger);
+      return;
+    }
+
+    showTooltip(trigger);
+  }
+
+  document.addEventListener("mouseover", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
+
+    hoveredTrigger = trigger;
+    showTooltip(trigger);
+  });
+
+  document.addEventListener("mouseout", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
+
+    if (hoveredTrigger === trigger) {
+      hoveredTrigger = null;
+    }
+    if (focusedTrigger === trigger) return;
+
+    hideTooltip(trigger);
+  });
+
+  document.addEventListener("focusin", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile()) return;
+
+    focusedTrigger = trigger;
+    showTooltip(trigger);
+  });
+
+  document.addEventListener("focusout", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile()) return;
+
+    if (focusedTrigger === trigger) {
+      focusedTrigger = null;
+    }
+    if (hoveredTrigger === trigger) return;
+
+    hideTooltip(trigger);
+  });
+
+  document.addEventListener("click", function(event) {
+    var trigger = closestTrigger(event.target);
+
+    if (trigger) {
+      if (!isMobile()) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      toggleTooltip(trigger);
+      return;
+    }
+
+    if (activeTrigger && isMobile()) {
+      hideTooltip();
+    }
+  });
+
+  document.addEventListener("keydown", function(event) {
+    if (event.key !== "Escape") return;
+
+    hideTooltip();
+  });
+
+  window.addEventListener("scroll", positionTooltip, true);
+  window.addEventListener("resize", function() {
+    hideTooltip();
+  });
+})();

data/app/assets/stylesheets/yummy_guide_administrate/_tooltips.scss

@@ -0,0 +1,85 @@
+.admin-tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0 0 0.25rem;
+  padding: 0;
+  border: 1px solid #7a8594;
+  border-radius: 50%;
+  background: #fff;
+  color: #4b5563;
+  cursor: help;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.admin-tooltip-trigger:hover,
+.admin-tooltip-trigger:focus-visible,
+.admin-tooltip-trigger[aria-expanded="true"] {
+  border-color: #0d6efd;
+  background: #f8fbff;
+  color: #0d6efd;
+  box-shadow: none;
+}
+
+.admin-tooltip-trigger__icon {
+  pointer-events: none;
+}
+
+.admin-tooltip {
+  position: fixed;
+  z-index: 1100;
+  max-width: 280px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  background: #1f2933;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  color: #fff;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  opacity: 0;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  transform: translateY(2px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  white-space: normal;
+}
+
+.admin-tooltip--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.admin-tooltip::before {
+  content: "";
+  position: absolute;
+  left: var(--admin-tooltip-arrow-left, 50%);
+  width: 8px;
+  height: 8px;
+  background: #1f2933;
+  transform: rotate(45deg);
+}
+
+.admin-tooltip[data-admin-tooltip-placement="top"]::before {
+  bottom: -4px;
+}
+
+.admin-tooltip[data-admin-tooltip-placement="bottom"]::before {
+  top: -4px;
+}
+
+@media screen and (max-width: 767px) {
+  .admin-tooltip-trigger {
+    cursor: pointer;
+  }
+
+  .admin-tooltip {
+    max-width: calc(100vw - 24px);
+    font-size: 0.85rem;
+  }
+}

data/app/assets/stylesheets/yummy_guide_administrate/components.scss

@@ -1,6 +1,7 @@
 @import "fixed_submit_actions";
 @import "datetime_input";
 @import "column_resizer";
+@import "tooltips";
 
 @media screen and (min-width: 768px) {
   .app-container {

data/app/helpers/yummy_guide/administrate/tooltip_helper.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module YummyGuide
+  module Administrate
+    module TooltipHelper
+      def admin_tooltip(text = nil, aria_label: "説明を表示", class: nil, data: {}, &block)
+        return if text.blank? && !block_given?
+
+        custom_class = binding.local_variable_get(:class)
+        content_id = admin_tooltip_content_id if block_given?
+
+        safe_join([
+          content_tag(
+            :button,
+            type: "button",
+            class: token_list("admin-tooltip-trigger", custom_class),
+            data: admin_tooltip_data_attributes(data, text: text.to_s, content_id: content_id),
+            aria: {
+              label: aria_label,
+              expanded: "false"
+            }
+          ) do
+            tag.span("?", class: "admin-tooltip-trigger__icon", aria: { hidden: true })
+          end,
+          (content_tag(:template, capture(&block), id: content_id) if content_id)
+        ].compact)
+      end
+
+      private
+
+      def admin_tooltip_content_id
+        @admin_tooltip_index ||= 0
+        @admin_tooltip_index += 1
+        "admin-tooltip-content-#{@admin_tooltip_index}"
+      end
+
+      def admin_tooltip_data_attributes(data, text:, content_id:)
+        attributes = (data || {}).to_h.deep_dup
+        attributes.delete(:admin_tooltip_trigger)
+        attributes.delete("admin_tooltip_trigger")
+        attributes.delete(:admin_tooltip_text)
+        attributes.delete("admin_tooltip_text")
+        attributes.delete(:admin_tooltip_content_id)
+        attributes.delete("admin_tooltip_content_id")
+
+        attributes[:admin_tooltip_trigger] = true
+        if content_id
+          attributes[:admin_tooltip_content_id] = content_id
+        else
+          attributes[:admin_tooltip_text] = text
+        end
+
+        attributes
+      end
+    end
+  end
+end

data/lib/yummy_guide/administrate/engine.rb

@@ -15,6 +15,7 @@ module YummyGuide
           yummy_guide_administrate/filter_controls.js
           yummy_guide_administrate/filter_form.js
           yummy_guide_administrate/sticky_left_columns.js
+          yummy_guide_administrate/tooltips.js
           yummy_guide_administrate/resizable_navigation.js
           yummy_guide_administrate/sticky_table_headers.js
         ]
@@ -27,6 +28,7 @@ module YummyGuide
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::NumberInputHelper
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::FilterFormHelper
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::FilterControlsHelper
+          ::Administrate::ApplicationController.helper YummyGuide::Administrate::TooltipHelper
         end
       end
     end

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.3"
+    VERSION = "0.8.4"
   end
 end

data/lib/yummy_guide/administrate.rb

@@ -6,6 +6,7 @@ require "administrate"
 require_relative "../../app/helpers/yummy_guide/administrate/number_input_helper"
 require_relative "../../app/helpers/yummy_guide/administrate/filter_form_helper"
 require_relative "../../app/helpers/yummy_guide/administrate/filter_controls_helper"
+require_relative "../../app/helpers/yummy_guide/administrate/tooltip_helper"
 require_relative "administrate/version"
 require_relative "administrate/filters"
 require_relative "administrate/engine"

data/spec/yummy_guide/administrate/tooltip_asset_spec.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+RSpec.describe "tooltip assets" do
+  let(:javascript_source) do
+    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/tooltips.js", __dir__))
+  end
+
+  let(:stylesheet_source) do
+    File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/_tooltips.scss", __dir__))
+  end
+
+  let(:engine_source) do
+    File.read(File.expand_path("../../../lib/yummy_guide/administrate/engine.rb", __dir__))
+  end
+
+  # PC では hover と keyboard focus で tooltip を表示するイベント契約を持つことを静的に確認する
+  it "supports desktop hover and focus interactions" do
+    expect(javascript_source).to include('document.addEventListener("mouseover"')
+    expect(javascript_source).to include('document.addEventListener("mouseout"')
+    expect(javascript_source).to include('document.addEventListener("focusin"')
+    expect(javascript_source).to include('document.addEventListener("focusout"')
+    expect(javascript_source).to include("showTooltip(trigger)")
+  end
+
+  # モバイルではクリックで tooltip 表示をトグルする契約を持つことを静的に確認する
+  it "supports mobile click toggling" do
+    expect(javascript_source).to include('MOBILE_MEDIA_QUERY = "(max-width: 767px)"')
+    expect(javascript_source).to include("window.matchMedia")
+    expect(javascript_source).to include('document.addEventListener("click"')
+    expect(javascript_source).to include("toggleTooltip(trigger)")
+    expect(javascript_source).to include("event.stopPropagation()")
+  end
+
+  # Esc / 外側クリック / resize で表示中 tooltip を閉じられることを静的に確認する
+  it "closes the active tooltip from common dismissal events" do
+    expect(javascript_source).to include('event.key !== "Escape"')
+    expect(javascript_source).to include("if (activeTrigger && isMobile())")
+    expect(javascript_source).to include('window.addEventListener("resize"')
+    expect(javascript_source).to include("hideTooltip()")
+  end
+
+  # block本文用のtemplateがある場合はHTML本文としてtooltipへ描画することを静的に確認する
+  it "renders template content for block tooltip bodies" do
+    expect(javascript_source).to include('getAttribute("data-admin-tooltip-content-id")')
+    expect(javascript_source).to include("template.innerHTML")
+    expect(javascript_source).to include("tooltipElement.innerHTML = content.html")
+    expect(javascript_source).to include("tooltipElement.textContent = content.text")
+  end
+
+  # tooltip の吹き出しと表示状態に必要な CSS class が定義されることを静的に確認する
+  it "defines tooltip trigger and bubble styles" do
+    expect(stylesheet_source).to include(".admin-tooltip-trigger")
+    expect(stylesheet_source).to include(".admin-tooltip")
+    expect(stylesheet_source).to include(".admin-tooltip--visible")
+    expect(stylesheet_source).to include('data-admin-tooltip-placement="top"')
+    expect(stylesheet_source).to include("max-width: calc(100vw - 24px)")
+  end
+
+  # tooltip の JS asset が engine の precompile 対象に入ることを確認する
+  it "precompiles the tooltip javascript asset" do
+    expect(engine_source).to include("yummy_guide_administrate/tooltips.js")
+  end
+end

data/spec/yummy_guide/administrate/tooltip_helper_spec.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+require "nokogiri"
+
+RSpec.describe YummyGuide::Administrate::TooltipHelper do
+  subject(:helper_host) do
+    Class.new do
+      include ActionView::Context
+      include ActionView::Helpers::CaptureHelper
+      include ActionView::Helpers::OutputSafetyHelper
+      include ActionView::Helpers::TagHelper
+      include YummyGuide::Administrate::TooltipHelper
+    end.new
+  end
+
+  def fragment(html)
+    Nokogiri::HTML.fragment(html)
+  end
+
+  describe "#admin_tooltip" do
+    # tooltip 表示用の button と JS が参照する data 属性を描画することを確認する
+    it "renders an icon button tooltip trigger" do
+      document = fragment(helper_host.admin_tooltip("公開ページに表示されます。"))
+      button = document.at_css("button.admin-tooltip-trigger")
+
+      expect(button["type"]).to eq("button")
+      expect(button["data-admin-tooltip-trigger"]).to eq("true")
+      expect(button["data-admin-tooltip-text"]).to eq("公開ページに表示されます。")
+      expect(button["aria-label"]).to eq("説明を表示")
+      expect(button["aria-expanded"]).to eq("false")
+      expect(button.at_css(".admin-tooltip-trigger__icon").text).to eq("?")
+      expect(button.at_css(".admin-tooltip-trigger__icon")["aria-hidden"]).to eq("true")
+    end
+
+    # tooltip 本文に HTML が含まれても子要素として展開されず data 属性へ escape されることを確認する
+    it "escapes tooltip text instead of rendering it as HTML" do
+      html = helper_host.admin_tooltip(%(<strong onclick="alert(1)">説明</strong>))
+      document = fragment(html)
+      button = document.at_css("button.admin-tooltip-trigger")
+
+      expect(document.at_css("strong")).to be_nil
+      expect(button["data-admin-tooltip-text"]).to eq(%(<strong onclick="alert(1)">説明</strong>))
+      expect(html).to include("&lt;strong")
+    end
+
+    # block を渡した場合は説明本文として template に描画し、text 引数より優先されることを確認する
+    it "renders block content as the tooltip body before text content" do
+      document = fragment(
+        helper_host.admin_tooltip("Fallback text") do
+          helper_host.safe_join([
+            helper_host.content_tag(:span, "Add - 調整レコードを追加表示するようにします。"),
+            helper_host.tag.br,
+            helper_host.content_tag(:span, "Only - 調整レコードのみを表示します。")
+          ])
+        end
+      )
+      button = document.at_css("button.admin-tooltip-trigger")
+      template = document.at_css("template")
+
+      expect(button["data-admin-tooltip-text"]).to be_nil
+      expect(button["data-admin-tooltip-content-id"]).to eq(template["id"])
+      expect(template.text).to include("Add - 調整レコードを追加表示するようにします。")
+      expect(template.text).to include("Only - 調整レコードのみを表示します。")
+      expect(template.at_css("br")).to be_present
+      expect(template.text).not_to include("Fallback text")
+    end
+
+    # 呼び出し側が指定した class / data / aria label を維持しつつ tooltip 用 data を優先することを確認する
+    it "merges custom attributes without allowing tooltip data overrides" do
+      document = fragment(
+        helper_host.admin_tooltip(
+          "ステータスの補足です。",
+          aria_label: "補足を開く",
+          class: "status-tooltip",
+          data: {
+            tracking_key: "status",
+            admin_tooltip_text: "上書きされない説明"
+          }
+        )
+      )
+      button = document.at_css("button.admin-tooltip-trigger")
+
+      expect(button["class"]).to include("admin-tooltip-trigger", "status-tooltip")
+      expect(button["aria-label"]).to eq("補足を開く")
+      expect(button["data-tracking-key"]).to eq("status")
+      expect(button["data-admin-tooltip-trigger"]).to eq("true")
+      expect(button["data-admin-tooltip-text"]).to eq("ステータスの補足です。")
+    end
+
+    # 空の説明文では空ボタンを描画しないことを確認する
+    it "does not render a trigger for blank text" do
+      expect(helper_host.admin_tooltip("")).to be_nil
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.3
+  version: 0.8.4
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-08 00:00:00.000000000 Z
+date: 2026-06-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -99,10 +99,12 @@ files:
 - app/assets/javascripts/yummy_guide_administrate/resizable_navigation.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js
+- app/assets/javascripts/yummy_guide_administrate/tooltips.js
 - app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss
 - app/assets/stylesheets/yummy_guide_administrate/_datetime_input.scss
 - app/assets/stylesheets/yummy_guide_administrate/_fixed_submit_actions.scss
 - app/assets/stylesheets/yummy_guide_administrate/_resizable_navigation.scss
+- app/assets/stylesheets/yummy_guide_administrate/_tooltips.scss
 - app/assets/stylesheets/yummy_guide_administrate/components.scss
 - app/controllers/concerns/yummy_guide/administrate/datetime_filter_parameters.rb
 - app/controllers/concerns/yummy_guide/administrate/default_sorting.rb
@@ -116,6 +118,7 @@ files:
 - app/helpers/yummy_guide/administrate/filter_controls_helper.rb
 - app/helpers/yummy_guide/administrate/filter_form_helper.rb
 - app/helpers/yummy_guide/administrate/number_input_helper.rb
+- app/helpers/yummy_guide/administrate/tooltip_helper.rb
 - app/views/fields/number/_form.html.erb
 - app/views/fields/yummy_guide_administrate/area/picture/_form.html.erb
 - app/views/fields/yummy_guide_administrate/area/picture/_index.html.erb
@@ -152,6 +155,8 @@ files:
 - spec/yummy_guide/administrate/filter_form_helper_spec.rb
 - spec/yummy_guide/administrate/filters_spec.rb
 - spec/yummy_guide/administrate/number_input_helper_spec.rb
+- spec/yummy_guide/administrate/tooltip_asset_spec.rb
+- spec/yummy_guide/administrate/tooltip_helper_spec.rb
 - yummy-guide-generic-administrate.gemspec
 homepage: https://github.com/yummy-guide/generic-administrate
 licenses: