theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

chore: usage of prettier, eslint and lint-staged instead of ts-standard

Browse Source
This commit is contained in:
divlo
2021-04-27 19:09:33 +02:00
parent 2a24af7c47
commit 0901b07611
34 changed files with 1574 additions and 1152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/design/Tooltip.tsx
View File

@ -3,7 +3,7 @@ interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
children: React.ReactNode
}
export const Tooltip: React.FC<TooltipProps> = props => {
export const Tooltip: React.FC<TooltipProps> = (props) => {
const { title, children, ...rest } = props
return (
<>
@ -12,37 +12,38 @@ export const Tooltip: React.FC<TooltipProps> = props => {
<span className='title'>{title}</span>
</span>
<style jsx>{`
.title {
color: #fff;
font-size: 11px;
font-weight: 400;
line-height: 1;
display: inline-block;
background-color: #222222;
padding: 5px 8px;
white-space: nowrap;
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
opacity: 0;
visibility: hidden;
border-radius: 3px;
transition: all 0.15s ease-in;
transform: translate3d(0, -15px, 0);
backface-visibility: hidden;
}
.tooltip ~ .tooltip:hover .title,
.tooltip:first-child:hover .title {
opacity: 1;
visibility: visible;
transition: all 0.35s ease-out;
transform: translate3d(0, 0, 0);
margin: 0;
backface-visibility: hidden;
}
`}
<style jsx>
{`
.title {
color: #fff;
font-size: 11px;
font-weight: 400;
line-height: 1;
display: inline-block;
background-color: #222222;
padding: 5px 8px;
white-space: nowrap;
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
opacity: 0;
visibility: hidden;
border-radius: 3px;
transition: all 0.15s ease-in;
transform: translate3d(0, -15px, 0);
backface-visibility: hidden;
}
.tooltip ~ .tooltip:hover .title,
.tooltip:first-child:hover .title {
opacity: 1;
visibility: visible;
transition: all 0.35s ease-out;
transform: translate3d(0, 0, 0);
margin: 0;
backface-visibility: hidden;
}
`}
</style>
</>
)