chore: add tooltip to buttons

rupali-codes · Aug 7, 2023 · 8e548ad · 8e548ad
1 parent 63226d6
commit 8e548ad
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 33 deletions.
diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useTransition } from 'react-transition-state'
 import { FaArrowUp } from 'react-icons/fa'
 import { SCROLL_LIMIT } from 'app/constants'
+import { Tooltip } from 'react-tooltip'
 
 export const BackToTopButton = () => {
   const [scrollY, setScrollY] = useState(0)
@@ -51,10 +52,13 @@ export const BackToTopButton = () => {
       <button
         className={buttonClasses}
         onClick={handleClick}
-        title="Back to top"
+        data-tooltip-id="btn-tooltip"
+        data-tooltip-content="Back to Top"
+        data-tooltip-place="top"
       >
         <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
+        <Tooltip id="btn-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
         👾
       </span>

diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -1,14 +1,14 @@
 import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React, { useState } from 'react'
+import React from 'react'
 import { FaRegCopy } from 'react-icons/fa'
+import { Tooltip } from 'react-tooltip'
 
 type CopyToClipboardProps = {
   url: string
 }
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   const [copyToClipboard, { success }] = useCopyToClipboard()
-  const [isHovering, setIsHovering] = useState(false)
 
   function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
     e.stopPropagation()
@@ -17,31 +17,16 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
 
   return (
     <div
-      className="dropdown dropdown-left dropdown-hover"
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-    >
+      className="dropdown dropdown-left dropdown-hover">
       <div style={{ position: 'relative' }}>
-        <FaRegCopy
+      <button data-tooltip-id="copy-tooltip" data-tooltip-content={success ? 'Copied!' : 'Copy'} data-tooltip-place="top">
+      <FaRegCopy
           size={'1.3rem'}
           className="text-theme-primary cursor-pointer"
-          title="Copy link"
           onClick={(e) => handleCopy(e)}
         />
-        {isHovering && (
-          <p
-            className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default"
-            style={{
-              position: 'absolute',
-              top: '-2rem', // Adjust this value to position the text above the icon
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1,
-            }}
-          >
-            {success ? 'Copied!' : 'Copy'}
-          </p>
-        )}
+        </button>
+      <Tooltip id='copy-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       </div>
     </div>
   )

diff --git a/components/Share/Share.tsx b/components/Share/Share.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { FiShare2 } from 'react-icons/fi'
+import { Tooltip } from 'react-tooltip'
 
 type ShareProps = {
   url: string
@@ -16,7 +17,6 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
           title: title,
           url: url,
         })
-        console.log('Share was successful.')
       } catch (error) {
         console.error('Error sharing:', error)
       }
@@ -33,15 +33,16 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
         position: 'relative',
         display: 'inline-block',
       }}
-      onMouseEnter={() => setShowShareOptions(true)}
-      onMouseLeave={() => setShowShareOptions(false)}
     >
+      <button data-tooltip-id="share-tooltip" data-tooltip-content="Share" data-tooltip-place="bottom">
       <FiShare2
         size={'1.2rem'}
         className="text-theme-primary cursor-pointer"
-        title="Share link"
         onClick={handleShare}
       />
+        </button>
+      <Tooltip id='share-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
+
       {showShareOptions && (
         <p
           className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -4,6 +4,7 @@ import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { Tooltip } from 'react-tooltip'
 
 export const TopBar: FC<{ className?: string | undefined }> = (props) => {
   const { className } = props
@@ -36,17 +37,24 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
       className={`flex items-center text-xl dark:text-gray-300 ${className}`}
     >
       <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="flex uppercase text-gray-900 dark:text-gray-100">
+      <span className="text-gray-900 dark:text-gray-100 uppercase">
         {category.split('-').join(' ')}
-        <FaInfoCircle
-          className="ml-4 mt-2 text-sm cursor-pointer"
-          onClick={handleCardClick}
-        />
+      </span>
+      <button
+          data-tooltip-id="info-tooltip"
+          data-tooltip-content="Description"
+          data-tooltip-place="bottom"
+        >
+          <FaInfoCircle
+            className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+            onClick={handleCardClick}
+          />
+        </button>
+        <Tooltip id="info-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
         <PopupDesc
           currentCategory={currentCategory}
           onClose={removeCurrentCard}
         />
-      </span>
     </div>
   )
 }