Add a tooltip on hover (#1043)

superdesk · Aug 22, 2024 · 6049399 · 6049399
1 parent ab520ce
commit 6049399
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/assets/search/components/SearchResultsBar/index.tsx b/assets/search/components/SearchResultsBar/index.tsx
@@ -24,6 +24,7 @@ import {Dropdown} from './../../../components/Dropdown';
 
 import {SearchResultTagsList} from './SearchResultTagsList';
 import {IDateFilter} from 'interfaces/common';
+import {ToolTip} from 'ui/components/ToolTip';
 
 interface ISortOption {
     label: string;
@@ -235,19 +236,26 @@ class SearchResultsBarComponent extends React.Component<IProps, IState> {
                                 >
                                     {gettext('Clear All')}
                                 </button>
-                                <button
-                                    data-test-id="toggle-search-bar"
-                                    onClick={this.toggleTagSection}
-                                    className="icon-button icon-button--tertiary icon-button--bordered"
-                                >
-                                    <i className={classNames(
-                                        'icon--arrow-right',
-                                        {
-                                            'icon--collapsible-open': isTagSectionShown,
-                                            'icon--collapsible-closed': !isTagSectionShown,
+                                <ToolTip key={`${isTagSectionShown}--state`} placement="left">
+                                    <button
+                                        title={
+                                            isTagSectionShown
+                                                ? gettext('Hide search terms')
+                                                : gettext('Show search terms')
                                         }
-                                    )} />
-                                </button>
+                                        data-test-id="toggle-search-bar"
+                                        onClick={this.toggleTagSection}
+                                        className="icon-button icon-button--tertiary icon-button--bordered"
+                                    >
+                                        <i className={classNames(
+                                            'icon--arrow-right',
+                                            {
+                                                'icon--collapsible-open': isTagSectionShown,
+                                                'icon--collapsible-closed': !isTagSectionShown,
+                                            }
+                                        )} />
+                                    </button>
+                                </ToolTip>
                             </div>
                         </div>
                     )}