import React from "react";
import styled from "styled-components";
const TooltipContainer = styled.span`
position: relative;
&:hover > .tip {
display: block;
}
& > .tip {
display: none;
position: absolute;
background: #1F2531;
opacity: 0.9;
border-radius: 5px;
color: #FFFFFF;
padding: 12px 8px;
width: 100%;
min-width: 100px;
}
& > .tip::after {
content: "";
position: absolute;
opacity: 0.9;
top: -10px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
`;
const Tooltip = ({children, tip}) => {
return <TooltipContainer>
{children}
<span className="tip">{tip}</span>
</TooltipContainer>
};
export default Tooltip;
Usage:
<Tooltip tip="I'm a tooltip">
<p>Example paragraph</p>
</Tooltip>
Top comments (0)