fix(UI): Adds tooltip for Domain action icons.

towfiqi · Dec 4, 2022 · b450540 · b450540
1 parent 8688f32
commit b450540
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/components/domains/DomainHeader.tsx b/components/domains/DomainHeader.tsx
@@ -19,6 +19,7 @@ const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, doma
    const { mutate: refreshMutate } = useRefreshKeywords(() => {});
 
    const buttonStyle = 'leading-6 inline-block px-2 py-2 text-gray-500 hover:text-gray-700';
+   const buttonLabelStyle = 'ml-2 text-sm not-italic lg:invisible lg:opacity-0';
    return (
       <div className='domain_kewywords_head flex w-full justify-between'>
          <div>
@@ -45,26 +46,23 @@ const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, doma
             lg:z-auto lg:relative lg:mt-0 lg:border-0 lg:w-auto lg:bg-transparent`}
             style={{ display: showOptions ? 'block' : undefined }}>
                <button
-               className={`${buttonStyle}`}
+               className={`domheader_action_button relative ${buttonStyle}`}
                aria-pressed="false"
-               title='Export as CSV'
                onClick={() => exportCsv()}>
-                  <Icon type='download' size={20} /><i className='ml-2 text-sm not-italic lg:hidden'>Export as csv</i>
+                  <Icon type='download' size={20} /><i className={`${buttonLabelStyle}`}>Export as csv</i>
                </button>
                <button
-               className={`${buttonStyle} lg:ml-3`}
+               className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
                aria-pressed="false"
-               title='Refresh All Keyword Positions'
                onClick={() => refreshMutate({ ids: [], domain: domain.domain })}>
-                  <Icon type='reload' size={14} /><i className='ml-2 text-sm not-italic lg:hidden'>Reload All Serps</i>
+                  <Icon type='reload' size={14} /><i className={`${buttonLabelStyle}`}>Reload All Serps</i>
                </button>
                <button
                data-testid="show_domain_settings"
-               className={`${buttonStyle} lg:ml-3`}
+               className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
                aria-pressed="false"
-               title='Domain Settings'
                onClick={() => showSettingsModal(true)}><Icon type='settings' size={20} />
-               <i className='ml-2 text-sm not-italic lg:hidden'>Domain Settings</i></button>
+               <i className={`${buttonLabelStyle}`}>Domain Settings</i></button>
             </div>
             <button
             data-testid="add_keyword"

diff --git a/styles/globals.css b/styles/globals.css
@@ -169,4 +169,39 @@ body {
    opacity: 0;
    transform: translateX(400px);
    transition: all 300ms;
+}
+
+
+@media (min-width: 1024px) {
+   /* Domain Header Button Tooltips */
+   .domheader_action_button:hover i{
+      visibility: visible;
+      opacity: 1;
+   }
+   .domheader_action_button i{
+      display: block;
+      position: absolute;
+      width: 100px;
+      left: -40px;
+      top: -22px;
+      background: #222;
+      border-radius: 3px;
+      color: #fff;
+      font-size: 12px;
+      padding-bottom: 3px;
+      transition: all 0.2s linear;
+   }
+   .domheader_action_button i:after{
+      content: "";
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 5px 5px 0 5px;
+      border-color: #222 transparent transparent transparent;
+      bottom: -5px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+   }
 }