Merge pull request #5597 from PR4NJ41/dev-1

Added Informative Text to 'See More' Button on Hover in P&E Dashboard 'Articles' Tab of a Program
WikiEducationFoundation · Feb 15, 2024 · 47bddd3 · 47bddd3
2 parents 6aa0802 + 5e7c517
commit 47bddd3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/articles/PaginatedArticleControls.jsx b/app/assets/javascripts/components/articles/PaginatedArticleControls.jsx
@@ -42,12 +42,17 @@ export const PaginatedArticleControls = ({ showMore, limitReached }) => {
       />) : null }
       {!limitReached
         && (
-          <button
-            style={{ width: 'max-content', height: 'max-content' }}
-            className="button ghost articles-see-more-btn" onClick={showMore}
-          >
-            {I18n.t('articles.see_more')}
-          </button>
+          <div className={'tooltip-trigger'}>
+            <button
+              style={{ width: 'max-content', height: 'max-content' }}
+              className="button ghost articles-see-more-btn" onClick={showMore}
+            >
+              {I18n.t('articles.see_more')}
+            </button>
+            <div className="tooltip tooltip-center tooltip-see-more dark large">
+              <p style={{ padding: '0px', textWrap: 'balance' }}>{I18n.t('articles.see_more_tooltip')}</p>
+            </div>
+          </div>
         )
       }
       <p className="articles-shown-label">

diff --git a/app/assets/stylesheets/modules/_tooltips.styl b/app/assets/stylesheets/modules/_tooltips.styl
@@ -38,6 +38,11 @@
       min-width 200px !important
       &:before
         margin-left 36% !important
+    &.tooltip-see-more
+      left -40%
+      min-width 200px !important
+      &:before
+        margin-left 36% !important
     &.large
       min-width 320px
       p

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -206,6 +206,7 @@ en:
       ?: Unrated — an article that hasn't yet been rated on Wikipedia's quality scale
       does_not_exist: This article does not exist on Wikipedia
     see_more: See more
+    see_more_tooltip: Only the first 500 edited articles are loaded initially. Click to load additional articles.
     search: Search Wikipedia for an Article
     show_cumulative_changes: Show Cumulative Changes
     show_current_version: Show Current Version

diff --git a/config/locales/qqq.yml b/config/locales/qqq.yml
@@ -186,6 +186,7 @@ qqq:
       does_not_exist: Explanation of the Ø  symbol, which indicates than the article
         does not exist on Wikipedia
     see_more: Message indicating that there are more articles to load
+    see_more_tooltip: Tooltip message shown when hovering on "See More" button for loading additional articles
     title: |-
       Label for an article title.
       {{Identical|Title}}