2 files changed, 35 insertions, 3 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 6236f749..be87761b 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -401,14 +401,16 @@ export class DisplayGenerator {
     }
 
     /**
-     * @param {string} inflection
+     * @param {import('dictionary').InflectionRule} inflection
      * @returns {DocumentFragment}
      */
     _createTermInflection(inflection) {
+        const {name, description} = inflection;
         const fragment = this._templates.instantiateFragment('inflection');
         const node = this._querySelector(fragment, '.inflection');
-        this._setTextContent(node, inflection);
-        node.dataset.reason = inflection;
+        this._setTextContent(node, name);
+        if (description) { node.title = description; }
+        node.dataset.reason = name;
         return fragment;
     }
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index dc6b4713..82d84979 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -162,6 +162,8 @@ export class Display extends EventDispatcher {
         this._contentTextScanner = null;
         /** @type {?import('./display-notification.js').DisplayNotification} */
         this._tagNotification = null;
+        /** @type {?import('./display-notification.js').DisplayNotification} */
+        this._inflectionNotification = null;
         /** @type {HTMLElement} */
         this._footerNotificationContainer = querySelectorNotNull(document, '#content-footer');
         /** @type {OptionToggleHotkeyHandler} */
@@ -181,6 +183,8 @@ export class Display extends EventDispatcher {
         /** @type {(event: MouseEvent) => void} */
         this._onTagClickBind = this._onTagClick.bind(this);
         /** @type {(event: MouseEvent) => void} */
+        this._onInflectionClickBind = this._onInflectionClick.bind(this);
+        /** @type {(event: MouseEvent) => void} */
         this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
         /** @type {(event: import('popup-menu').MenuCloseEvent) => void} */
         this._onMenuButtonMenuCloseBind = this._onMenuButtonMenuClose.bind(this);
@@ -1026,6 +1030,14 @@ export class Display extends EventDispatcher {
     /**
      * @param {MouseEvent} e
      */
+    _onInflectionClick(e) {
+        const node = /** @type {HTMLElement} */ (e.currentTarget);
+        this._showInflectionNotification(node);
+    }
+
+    /**
+     * @param {MouseEvent} e
+     */
     _onMenuButtonClick(e) {
         const node = /** @type {HTMLElement} */ (e.currentTarget);
 
@@ -1086,6 +1098,21 @@ export class Display extends EventDispatcher {
     }
 
     /**
+     * @param {HTMLSpanElement} inflectionNode
+     */
+    _showInflectionNotification(inflectionNode) {
+        const description = inflectionNode.title;
+        if (!description || !(inflectionNode instanceof HTMLSpanElement)) { return; }
+
+        if (this._inflectionNotification === null) {
+            this._inflectionNotification = this.createNotification(true);
+        }
+
+        this._inflectionNotification.setContent(description);
+        this._inflectionNotification.open();
+    }
+
+    /**
      * @param {boolean} animate
      */
     _hideTagNotification(animate) {
@@ -1797,6 +1824,9 @@ export class Display extends EventDispatcher {
         for (const node of entry.querySelectorAll('.headword-kanji-link')) {
             eventListeners.addEventListener(node, 'click', this._onKanjiLookupBind);
         }
+        for (const node of entry.querySelectorAll('.inflection[data-reason]')) {
+            eventListeners.addEventListener(node, 'click', this._onInflectionClickBind);
+        }
         for (const node of entry.querySelectorAll('.tag-label')) {
             eventListeners.addEventListener(node, 'click', this._onTagClickBind);
         }