41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { ReactNode } from "react";
|
|
|
|
export interface TooltipProps {
|
|
/**
|
|
* Tooltip text - can be string or another component
|
|
*/
|
|
tooltipMessage: ReactNode;
|
|
/**
|
|
* The targeted component
|
|
*/
|
|
children: ReactNode;
|
|
}
|
|
|
|
const Tooltip = ({ tooltipMessage, children }: TooltipProps) => {
|
|
return (
|
|
<div
|
|
className="group cursor-pointer relative focus:outline-none overflow-hidden
|
|
hover:overflow-visible"
|
|
>
|
|
{/* Tooltip will be shown under the component(children) when the children is onHover */}
|
|
{children}
|
|
{/* Creating the tooltip and give it a postion */}
|
|
<div
|
|
className="absolute left-1/2 -bottom-10 p-2 rounded transition-all duration-1000
|
|
bg-gray-900 text-white text-sm -translate-x-1/2 opacity-0 z-40
|
|
|
|
leading-none whitespace-no-wrap w-fit text-center
|
|
|
|
before:content-[''] before:absolute before:-top-1 before:left-1/2 before:-translate-x-1/2
|
|
before:w-3 before:h-3 before:bg-gray-900 before:rotate-45 before:rounded-sm
|
|
|
|
group-hover:opacity-100"
|
|
>
|
|
{tooltipMessage}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tooltip;
|