Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): fix bug in tooltip hover #943

Merged
merged 8 commits into from
Dec 5, 2024
Merged

fix(docs): fix bug in tooltip hover #943

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ec33b0b
fix: fix bug in tooltip hover
joshua-demo Sep 11, 2024
6f036de
Merge pull request #1 from joshua-demo/able-to-hover-tooltip
joshua-demo Sep 11, 2024
ac1b316
Merge branch 'main' into main
FelixNicolaeBucsa Oct 1, 2024
1582942
Merge branch 'main' into main
gautamgambhir97 Nov 25, 2024
b4d0f3e
update: update tooltio to close on scroll or anyhwere click outside
gautamgambhir97 Nov 25, 2024
d8ff95f
Merge branch 'main' into main
devjsc Nov 26, 2024
59ea73f
Merge branch 'main' into main
gautamgambhir97 Dec 5, 2024
a92a99a
Merge branch 'main' into main
devjsc Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 19 additions & 50 deletions components/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import React, { useEffect, useRef, useState } from "react";
const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
const [tooltip, setTooltip] = useState(false);
const [boundary, setBoundary] = useState(false);
const tooltipRef = useRef<HTMLDivElement | null>(null);

const showTooltip = () => {
setTooltip(true);
const toggleTooltip = () => {
setTooltip((prev) => !prev);
};

const tooltipRef = useRef(null);
useEffect(() => {
const handleScroll = () => {
if (tooltipRef.current) {
Expand All @@ -18,31 +18,37 @@ const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
setBoundary(distanceToBottom <= touchThreshold);
}
};

const handleClickOutside = (event: MouseEvent) => {
if (
tooltipRef.current &&
!tooltipRef.current.contains(event.target as Node)
) {
setTooltip(false);
}
};
window.addEventListener("scroll", handleScroll);
handleScroll();
window.addEventListener("scroll", handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);

return () => {
window.removeEventListener("scroll", handleScroll);
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

const hideTooltip = () => {
setTooltip(false);
};
return (
<div>
<div ref={tooltipRef} className="relative">
<div className="flex flex-col items-start px-6 mx-auto nx-container nx-pl-12 md:nx-pl-0 md:items-center">
<div className="nx-flex-col md:nx-flex-row nx-flex nx-items-center md:nx-justify-center">
<a
tabIndex={0}
role="link"
aria-label="tooltip"
className="nx-focus:outline-none nx-focus:ring-gray-300 nx-rounded-full nx-focus:ring-offset-2 nx-focus:ring-2 nx-focus:bg-gray-200 nx-relative nx-mt-20 md:nx-mt-0"
onMouseOver={showTooltip}
onFocus={showTooltip}
onMouseOut={hideTooltip}
onClick={toggleTooltip}
>
<div ref={tooltipRef} className="nx-cursor-pointer">
<div className="nx-cursor-pointer">
<svg
width="20"
height="20"
Expand All @@ -59,46 +65,9 @@ const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
id="tooltip"
role="tooltip"
className={`nx-z-20 ${
boundary && "nx-bottom-10"
boundary ? "nx-bottom-10" : ""
} nx-w-64 nx-absolute nx-transition nx-duration-150 nx-ease-in-out nx-left-0 nx-ml-8 nx-shadow-lg nx-bg-white dark:nx-bg-dark-mode-white-2 nx-p-4 nx-rounded`}
>
<svg
className="h-full nx-absolute nx-left-0 nx-ml-2 nx-bottom-0 nx-top-0"
width="9px"
height="16px"
viewBox="0 0 9 16"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="Tooltips-"
transform="translate(-874.000000, -1029.000000)"
>
<g
id="Group-3-Copy-16"
transform="translate(850.000000, 975.000000)"
>
<g
id="Group-2"
transform="translate(24.000000, 0.000000)"
>
<polygon
id="Triangle"
transform="translate(4.500000, 62.000000) rotate(-90.000000) translate(-4.500000, -62.000000)"
points="4.5 57.5 12.5 66.5 -3.5 66.5"
></polygon>
</g>
</g>
</g>
</g>
</svg>
{children}
</div>
)}
Expand Down
Loading