tooltip implemented

NishantCoder108 · Mar 2, 2024 · 48a6f1a · 48a6f1a
1 parent a58522a
commit 48a6f1a
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/src/components/BooksCard.tsx b/src/components/BooksCard.tsx
@@ -5,6 +5,7 @@ import {
     CardFooter,
     Image,
     Link,
+    Tooltip,
 } from "@nextui-org/react";
 import DownloadBtn from "../assets/svg/download.svg";
 import { BookState } from "../features/bookSlice";
@@ -48,21 +49,28 @@ const BooksCard = (props: BookState) => {
                         </p>
                         <div className="flex items-center justify-between w-full">
                             <p>{pages || 0} Pages</p>
-                            <Button
-                                isIconOnly
-                                aria-label="download books"
-                                className="bg-transparent"
-                                radius="full"
-                                href={download}
-                                as={Link}
-                                download={true}
+                            <Tooltip
+                                placement={"bottom"}
+                                offset={-3}
+                                showArrow
+                                content="Download"
                             >
-                                <img
-                                    alt="download books"
-                                    src={DownloadBtn}
-                                    className="w-4"
-                                />
-                            </Button>
+                                <Button
+                                    isIconOnly
+                                    aria-label="download books"
+                                    className="bg-transparent"
+                                    radius="full"
+                                    href={download}
+                                    as={Link}
+                                    download={true}
+                                >
+                                    <img
+                                        alt="download books"
+                                        src={DownloadBtn}
+                                        className="w-4"
+                                    />
+                                </Button>
+                            </Tooltip>
                         </div>
                     </CardFooter>
                 </Card>