feat: use react-tooltip and create tooltip-x

Author: dinhanhthi

package.json

@@ -48,6 +48,7 @@
     "react-lazy-images": "^1.1.0",
     "react-snap-carousel": "^0.3.2",
     "react-syntax-highlighter": "15.5.0",
+    "react-tooltip": "^5.28.0",
     "sharp": "^0.32.5",
     "slugify": "^1.6.6",
     "swr": "^2.2.2",

src/components/tooltip-x.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Tooltip } from 'react-tooltip'
+
+type TooltipXProps = {
+  className?: string
+  content: string
+  id: string
+}
+
+export default function TooltipX(props: TooltipXProps) {
+  return (
+    <Tooltip
+      anchorSelect={`#draft-${props.id}`}
+      place="bottom"
+      className="!text-sm !px-2 !py-0.5 !rounded-md"
+      noArrow={true}
+      defaultIsOpen={true}
+    >
+      {props.content}
+    </Tooltip>
+  )
+}