Skip to content

Commit

Permalink
refactor(tooltip): fix code structure
Browse files Browse the repository at this point in the history
  • Loading branch information
100percentibrahim committed Apr 15, 2024
1 parent 0bcdea0 commit 46c4437
Showing 1 changed file with 7 additions and 17 deletions.
24 changes: 7 additions & 17 deletions packages/components/tooltip/src/tooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from "react";
import { LoadingText } from "@ibrahimstudio/jsx";
import { ISLoader } from "@ibrahimstudio/jsx";
import s from "./tooltip.module.css";

interface TooltipProps {
content: string;
content?: string;
children: React.ReactNode;
isLoading?: boolean;
color?: string;
bgColor?: string;
}

const Tooltip: React.FC<TooltipProps> = ({
Expand All @@ -19,9 +17,9 @@ const Tooltip: React.FC<TooltipProps> = ({
const hoverTimeout = React.useRef<number | null>(null);
const tooltipContentRef = React.useRef<HTMLDivElement | null>(null);
const tooltipRef = React.useRef<HTMLDivElement | null>(null);
// delay timer for tooltip

const delay: number = 500;
// mouse event handler for tooltip

const handleMouseEnter = () => {
hoverTimeout.current = window.setTimeout(() => {
setHover(true);
Expand All @@ -35,20 +33,12 @@ const Tooltip: React.FC<TooltipProps> = ({
}
setHover(false);
};
// render tooltip position

const updateTooltipPosition = () => {
if (tooltipContentRef.current && tooltipRef.current) {
const rect = tooltipContentRef.current.getBoundingClientRect();
const { top } = rect;

// if (left < 0 + padding) {
// const newLeft = Math.abs(left) + padding;
// tooltipContentRef.current.style.left = `${newLeft}px`;
// } else if (right + padding > window.innerWidth) {
// const newRight = right + padding - window.innerWidth;
// tooltipContentRef.current.style.right = `${newRight}px`;
// }

if (top < 0) {
tooltipRef.current.style.top = "unset";
tooltipRef.current.style.bottom = "0";
Expand All @@ -57,7 +47,7 @@ const Tooltip: React.FC<TooltipProps> = ({
}
}
};
// effect to handle tooltip resizing

React.useEffect(() => {
const handleResize = () => {
if (hover) {
Expand All @@ -82,7 +72,7 @@ const Tooltip: React.FC<TooltipProps> = ({
<div ref={tooltipRef} className={s.tooltip}>
<div ref={tooltipContentRef} className={s.tooltipContent}>
<div className={s.tooltipContentText}>
{isLoading ? <LoadingText /> : content}
{isLoading ? <ISLoader /> : content}
</div>
</div>
</div>
Expand Down

0 comments on commit 46c4437

Please sign in to comment.