[NEW] Tooltips (#18399)
Co-authored-by: Gabriel Henriques <gabriel.henriques@rocket.chat>pull/17973/head^2
Guilherme Gazzo
6 years ago
committed by
GitHub
parent
9b49a44d1e
commit
0afa7f451e
@ -1,88 +0,0 @@ |
||||
.rc-tooltip { |
||||
position: relative; |
||||
--translation-x: -50%; |
||||
|
||||
&::before, |
||||
&::after { |
||||
position: absolute; |
||||
z-index: 1000; |
||||
bottom: 100%; |
||||
left: 50%; |
||||
|
||||
transition: all 0.18s ease-out 0.18s; |
||||
transform: translate(var(--translation-x), 10px); |
||||
transform-origin: top; |
||||
pointer-events: none; |
||||
|
||||
opacity: 0; |
||||
} |
||||
|
||||
&::after { |
||||
|
||||
bottom: 100%; |
||||
|
||||
margin: 11px 0; |
||||
padding: 0.5em 1em; |
||||
|
||||
content: attr(aria-label) attr(label); |
||||
white-space: nowrap; |
||||
|
||||
color: var(--tooltip-text-color); |
||||
border-radius: var(--tooltip-radius); |
||||
background: var(--tooltip-background); |
||||
|
||||
font-size: var(--tooltip-text-size); |
||||
} |
||||
|
||||
&::before { |
||||
|
||||
width: 0; |
||||
height: 0; |
||||
margin-bottom: 6px; |
||||
|
||||
content: ""; |
||||
|
||||
border-width: 6px 6px 0; |
||||
border-style: solid; |
||||
border-color: var(--tooltip-background) transparent transparent transparent; |
||||
} |
||||
|
||||
&--down { |
||||
&::after { |
||||
top: 100%; |
||||
bottom: initial; |
||||
} |
||||
|
||||
&::before { |
||||
top: 100%; |
||||
bottom: initial; |
||||
|
||||
border-width: 6px; |
||||
border-color: transparent transparent var(--tooltip-background) transparent; |
||||
} |
||||
} |
||||
|
||||
&--start, |
||||
.rtl &--end { |
||||
--translation-x: -10%; |
||||
} |
||||
|
||||
&--end, |
||||
.rtl &--start { |
||||
--translation-x: -90%; |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 501px) { |
||||
.rc-tooltip[aria-label] { |
||||
&:hover::before, |
||||
&:hover::after, |
||||
&:focus::before, |
||||
&:focus::after { |
||||
transform: translate(var(--translation-x), 0); |
||||
pointer-events: auto; |
||||
|
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
import { Tracker } from 'meteor/tracker'; |
||||
|
||||
import { createEphemeralPortal } from '../../../../client/reactAdapters'; |
||||
|
||||
const Dep = new Tracker.Dependency(); |
||||
|
||||
let state; |
||||
let dom; |
||||
let unregister; |
||||
|
||||
const createAchor = () => { |
||||
const div = document.createElement('div'); |
||||
div.id = 'react-tooltip'; |
||||
document.body.appendChild(div); |
||||
return div; |
||||
}; |
||||
|
||||
|
||||
const props = () => { |
||||
Dep.depend(); |
||||
return state; |
||||
}; |
||||
|
||||
export const closeTooltip = () => { |
||||
if (!dom) { |
||||
return; |
||||
} |
||||
unregister = unregister && unregister(); |
||||
}; |
||||
|
||||
export const openToolTip = async (title, anchor) => { |
||||
dom = dom || createAchor(); |
||||
state = { |
||||
title, |
||||
anchor, |
||||
}; |
||||
Dep.changed(); |
||||
unregister = unregister || await createEphemeralPortal(() => import('./TooltipComponent'), props, dom); |
||||
}; |
||||
|
||||
document.body.addEventListener('mouseover', (() => { |
||||
let timeout; |
||||
return (e) => { |
||||
timeout = timeout && clearTimeout(timeout); |
||||
timeout = setTimeout(() => { |
||||
const element = e.target.title || e.dataset?.title ? e.target : e.target.closest('[title], [data-title]'); |
||||
if (element) { |
||||
element.dataset.title = element.dataset.title || element.title; |
||||
element.removeAttribute('title'); |
||||
openToolTip(element.dataset.title, element); |
||||
} |
||||
}, 1000); |
||||
closeTooltip(); |
||||
}; |
||||
})()); |
||||
@ -0,0 +1,16 @@ |
||||
import React, { useRef } from 'react'; |
||||
import { Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage'; |
||||
|
||||
export const TooltipComponent = ({ title, anchor }) => { |
||||
const ref = useRef(anchor); |
||||
|
||||
return <PositionAnimated |
||||
anchor={ref} |
||||
placement='top-middle' |
||||
margin={8} |
||||
visible={AnimatedVisibility.UNHIDING} |
||||
children={title} |
||||
><Tooltip>{title}</Tooltip></PositionAnimated>; |
||||
}; |
||||
|
||||
export default TooltipComponent; |
||||
Loading…
Reference in new issue