Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d4ceaf5

Browse files
fix: close tooltip on link redirect (#7640)
1 parent c10f8d0 commit d4ceaf5

File tree

2 files changed

+99
-79
lines changed

2 files changed

+99
-79
lines changed

‎src/components/Navigation/Navigation.jsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Import External Dependencies
2-
import { useEffect, useState } from 'react';
2+
import { useEffect, useState,useRef } from 'react';
33
import PropTypes from 'prop-types';
44
import { DocSearch } from '@docsearch/react';
55
import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom';
@@ -70,12 +70,21 @@ NavigationIcon.propTypes = {
7070
title: PropTypes.string.isRequired,
7171
};
7272
function NavigationIcon({ children, to, title }) {
73+
const tooltipRef = useRef();
74+
75+
const hideTooltip = () => {
76+
if (tooltipRef.current) {
77+
tooltipRef.current.blur();
78+
}
79+
};
80+
7381
return (
74-
<Tooltip content={`webpack on ${title}`}>
82+
<Tooltip content={`webpack on ${title}`}ref={tooltipRef}>
7583
<Link
7684
to={to}
7785
className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
7886
aria-label={`webpack on ${title}`}
87+
onClick={hideTooltip}
7988
>
8089
{children}
8190
</Link>

‎src/components/Tooltip/Tooltip.jsx

Lines changed: 88 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,107 @@
1-
import { useState } from 'react';
1+
import { useState,forwardRef } from 'react';
22
import PropTypes from 'prop-types';
3-
const Tooltip = ({
4-
children,
5-
content,
6-
position = 'bottom',
7-
delay = 300,
8-
className = '',
9-
}) => {
10-
const [isVisible, setIsVisible] = useState(false);
11-
const [isDelayed, setIsDelayed] = useState(false);
12-
const showTooltip = () => {
13-
const timer = setTimeout(() => {
14-
setIsDelayed(true);
15-
}, delay);
16-
setIsVisible(true);
17-
return () => clearTimeout(timer);
18-
};
19-
const hideTooltip = () => {
20-
setIsVisible(false);
21-
setIsDelayed(false);
22-
};
23-
// Position classes - increase the margins to create more space
24-
const positions = {
25-
top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
26-
bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
27-
left: 'right-full top-1/2 -translate-y-1/2 mr-8',
28-
right: 'left-full top-1/2 -translate-y-1/2 ml-8',
29-
};
30-
// Custom background color for both tooltip and triangle
31-
const bgColor = '#526B78';
32-
return (
33-
<div
34-
className={`relative flex items-center justify-center ${className}`}
35-
onMouseEnter={showTooltip}
36-
onMouseLeave={hideTooltip}
37-
onFocus={showTooltip}
38-
onBlur={hideTooltip}
39-
>
40-
{children}
41-
{isVisible && (
42-
<div
43-
className={`
3+
4+
const Tooltip = forwardRef(
5+
(
6+
{
7+
children,
8+
content,
9+
position = 'bottom',
10+
delay = 300,
11+
className = '',
12+
onHide,
13+
},
14+
ref
15+
) => {
16+
const [isVisible, setIsVisible] = useState(false);
17+
const [isDelayed, setIsDelayed] = useState(false);
18+
const showTooltip = () => {
19+
const timer = setTimeout(() => {
20+
setIsDelayed(true);
21+
}, delay);
22+
setIsVisible(true);
23+
return () => clearTimeout(timer);
24+
};
25+
const hideTooltip = () => {
26+
setIsVisible(false);
27+
setIsDelayed(false);
28+
if (onHide) onHide();
29+
};
30+
// Position classes - increase the margins to create more space
31+
const positions = {
32+
top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
33+
bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
34+
left: 'right-full top-1/2 -translate-y-1/2 mr-8',
35+
right: 'left-full top-1/2 -translate-y-1/2 ml-8',
36+
};
37+
// Custom background color for both tooltip and triangle
38+
const bgColor = '#526B78';
39+
return (
40+
<div
41+
ref={ref}
42+
className={`relative flex items-center justify-center ${className}`}
43+
onMouseEnter={showTooltip}
44+
onMouseLeave={hideTooltip}
45+
onBlur={hideTooltip}
46+
>
47+
{children}
48+
{isVisible && (
49+
<div
50+
className={`
4451
absolute z-[9999]
4552
${positions[position]}
4653
${isDelayed ? 'opacity-100' : 'opacity-0'}
4754
transition-opacity duration-200
4855
pointer-events-none
4956
`}
50-
>
51-
<div
52-
className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
53-
style={{ backgroundColor: bgColor }}
5457
>
55-
{content}
56-
{/* Triangle/Arrow - Reduced size */}
57-
{position === 'top' && (
58-
<div
59-
className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
60-
style={{ borderTopColor: bgColor }}
61-
></div>
62-
)}
63-
{position === 'bottom' && (
64-
<div
65-
className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
66-
style={{ borderBottomColor: bgColor }}
67-
></div>
68-
)}
69-
{position === 'left' && (
70-
<div
71-
className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
72-
style={{ borderLeftColor: bgColor }}
73-
></div>
74-
)}
75-
{position === 'right' && (
76-
<div
77-
className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
78-
style={{ borderRightColor: bgColor }}
79-
></div>
80-
)}
58+
<div
59+
className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
60+
style={{ backgroundColor: bgColor }}
61+
>
62+
{content}
63+
{/* Triangle/Arrow - Reduced size */}
64+
{position === 'top' && (
65+
<div
66+
className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
67+
style={{ borderTopColor: bgColor }}
68+
></div>
69+
)}
70+
{position === 'bottom' && (
71+
<div
72+
className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
73+
style={{ borderBottomColor: bgColor }}
74+
></div>
75+
)}
76+
{position === 'left' && (
77+
<div
78+
className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
79+
style={{ borderLeftColor: bgColor }}
80+
></div>
81+
)}
82+
{position === 'right' && (
83+
<div
84+
className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
85+
style={{ borderRightColor: bgColor }}
86+
></div>
87+
)}
88+
</div>
8189
</div>
82-
</div>
83-
)}
84-
</div>
85-
);
86-
};
90+
)}
91+
</div>
92+
);
93+
}
94+
);
95+
96+
Tooltip.displayName = 'Tooltip';
8797

8898
Tooltip.propTypes = {
8999
children: PropTypes.node.isRequired,
90100
content: PropTypes.node.isRequired,
91101
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
92102
delay: PropTypes.number,
93103
className: PropTypes.string,
104+
onHide: PropTypes.func,
94105
};
95106

96107
export default Tooltip;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /