Merge pull request #1400 from kunalmaurya6/tooltip

add tooltip
HimanshuNarware · Jul 8, 2024 · c46f0e5 · c46f0e5
2 parents a06f6e0 + 5b69f19
commit c46f0e5
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -132,3 +132,23 @@
     border-radius: 50px;
   }
 }
+.chatbot:hover .tooltiptext{
+
+  top: -2.5em;
+  left: -1em;
+  visibility: visible;
+  opacity: 1;
+}
+.tooltiptext{
+  position: absolute;
+  top: 0;
+  left: 2em;
+  transform: transLateX(-50%);
+  background-color:rgb(207, 238, 238);
+  color: rgb(197, 129, 129);
+  white-space: nowrap;
+  padding: 5px 10px;
+  border-radius: 7px;
+  visibility: hidden;
+  transition: opacity 0.5s ease;
+}
diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -19,6 +19,7 @@ const ChatAssistant = () => {
 
   return (
     <div className='chatbot'>
+      <span className="tooltiptext">Chat boat</span>
       <img
         className='Logo'
         src={chatbotLogo}

diff --git a/frontend/src/Component/BackToTopButton.js b/frontend/src/Component/BackToTopButton.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import '../style/BackToTopButton.css'
+import '../style/BackToTopButton.css';
 
 import { MdKeyboardDoubleArrowUp } from "react-icons/md";
 
@@ -47,6 +47,7 @@ function BackToTopButton() {
         >
         <MdKeyboardDoubleArrowUp style={iconStyle}/>
 
+        <span className='tooltiptext'>Go top page</span>
         </button>
         </a>
     );

diff --git a/frontend/src/style/BackToTopButton.css b/frontend/src/style/BackToTopButton.css
@@ -18,9 +18,29 @@
 }
 
 
-.back-to-top-button:hover {
+.back-to-top-button:hover{
     background-color: rgba(17, 99, 76, 0.856);
     transform: scale(1.1);
     cursor: none;
 }
+.back-to-top-button:hover .tooltiptext{
+
+    top: -2.5em;
+    left: -1em;
+    visibility: visible;
+    opacity: 1;
+}
+.tooltiptext{
+    position: absolute;
+    top: 0;
+    left: 2em;
+    transform: transLateX(-50%);
+    background-color:rgb(207, 238, 238);
+    color: rgb(197, 129, 129);
+    white-space: nowrap;
+    padding: 5px 10px;
+    border-radius: 7px;
+    visibility: hidden;
+    transition: opacity 0.5s ease;
+}
 
diff --git a/frontend/src/style/tooltip.css b/frontend/src/style/tooltip.css