on 39181a7 help sign in
bridge/src/components/WithTooltip.js
23 lines 636 B history raw
1import React, { useState, useCallback } from 'react';
3export default function WithTooltip({ content, children }) {
4 const [isHovered, setHovered] = useState(false);
5 const onMouseEnter = useCallback(() => setHovered(true), []);
6 const onMouseLeave = useCallback(() => setHovered(false), []);
8 return (
9 <div
10 className="rel nowrap inline-block"
11 onMouseEnter={onMouseEnter}
12 onMouseLeave={onMouseLeave}>
13 {children}
14 {isHovered && (
15 <div
16 className="abs mb1 bg-black white ph4 pv2 r4"
17 style={{ bottom: '100%' }}>
18 {content}
19 </div>
20 )}
21 </div>
22 );