* docs: redesigned navigation bar (#2478) * docs: redesigned homepage (#2480) * docs: redesigned homepage * fixed link * docs: redesigned notes (#2491) * docs: Applied Typography redesign rules (#2516) * changes to typography * small changes and fixes * docs: redesigned table of content (#2518) * redesigning toc * finalized table of content design * docs: redesigned code blocks (#2519) * docs: redesigned code blocks * removed unused package * docs: redesigned survey and content footer (#2522) * fixes to inline code * redesigned doc footer * docs: redesigned footer (#2523) * docs: changed dark mode colors (#2524) * docs: redesigned sidebar (#2535) * docs: redesigned search modal (#2537) * docs: resolved loose ends (#2538) * added spacing for tabs * docs: added no-zoom class for deploy images * fix to tooltip design for inline code
20 lines
510 B
JavaScript
20 lines
510 B
JavaScript
import React from 'react';
|
|
|
|
export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
|
|
const [show, setShow] = React.useState(false);
|
|
|
|
return (
|
|
<div className={`tooltip-container ${tooltipClassName || ''}`}>
|
|
<div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
|
|
{text}
|
|
</div>
|
|
<div
|
|
onMouseEnter={() => setShow(true)}
|
|
onMouseLeave={() => setShow(false)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |