|
@@ -0,0 +1,127 @@
|
|
|
+import {computePosition, offset, flip, shift, arrow} from '@floating-ui/dom';
|
|
|
+
|
|
|
+
|
|
|
+const Tooltip = (el, binding, vNode, preVnode) => {
|
|
|
+ if (!binding.value) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let tooltipNode = null
|
|
|
+ el.addEventListener('mouseenter', function (e) {
|
|
|
+ tooltipNode = document.createElement('div')
|
|
|
+ tooltipNode.style.position = 'fixed'
|
|
|
+ tooltipNode.style.zIndex = 100
|
|
|
+ tooltipNode.style.backgroundColor = 'rgba(0,0,0,1)'
|
|
|
+ tooltipNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
|
|
|
+ tooltipNode.style.borderRadius = '3px'
|
|
|
+ tooltipNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
|
|
|
+ tooltipNode.style.boxShadow = '0px 2px 12px 0px rgba(0, 0, 0, 0.06)'
|
|
|
+ tooltipNode.style.padding = '8px 8px'
|
|
|
+ tooltipNode.style.fontSize = '12px'
|
|
|
+ tooltipNode.style.cursor = 'default'
|
|
|
+ tooltipNode.style.pointerEvents = 'none'
|
|
|
+ tooltipNode.style.wordBreak = 'keep-all'
|
|
|
+ tooltipNode.style.whiteSpace = 'pre'
|
|
|
+ tooltipNode.style.fontSize = '12px'
|
|
|
+ tooltipNode.style.lineHeight = '17px'
|
|
|
+ tooltipNode.style.color = '#ffffff'
|
|
|
+ tooltipNode.innerText = binding.value
|
|
|
+
|
|
|
+ const arrowNode = document.createElement('div')
|
|
|
+ arrowNode.style.position = 'absolute'
|
|
|
+ arrowNode.style.backgroundColor = 'inherit'
|
|
|
+ arrowNode.style.boxSizing = 'border-box'
|
|
|
+ arrowNode.style.width = '12px'
|
|
|
+ arrowNode.style.height = '12px'
|
|
|
+ arrowNode.style.border = '1px solid transparent'
|
|
|
+ arrowNode.style.borderRight = 'inherit'
|
|
|
+ arrowNode.style.borderBottom = 'inherit'
|
|
|
+ arrowNode.style.transform = 'rotate(45deg)'
|
|
|
+
|
|
|
+ tooltipNode.appendChild(arrowNode)
|
|
|
+ document.body.appendChild(tooltipNode)
|
|
|
+
|
|
|
+ computePosition(el, tooltipNode, {
|
|
|
+ placement: 'top',
|
|
|
+ middleware: [
|
|
|
+ offset(13),
|
|
|
+ flip(),
|
|
|
+ shift({ padding: 12 }),
|
|
|
+ arrow({
|
|
|
+ element: arrowNode,
|
|
|
+ padding: 3,
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ }).then(({ x, y, placement, middlewareData }) => {
|
|
|
+ Object.assign(tooltipNode.style, {
|
|
|
+ left: `${x}px`,
|
|
|
+ top: `${y}px`,
|
|
|
+ });
|
|
|
+
|
|
|
+ const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
|
+ const staticSide = {
|
|
|
+ top: 'bottom',
|
|
|
+ right: 'left',
|
|
|
+ bottom: 'top',
|
|
|
+ left: 'right',
|
|
|
+ }[placement.split('-')[0]];
|
|
|
+
|
|
|
+ Object.assign(arrowNode.style, {
|
|
|
+ left: arrowX != null ? `${arrowX}px` : '',
|
|
|
+ [staticSide]: '-6px',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, {
|
|
|
+ passive: false,
|
|
|
+ })
|
|
|
+ el.addEventListener('mouseleave', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('mousedown', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('keydown', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('scroll', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('dragstart', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('dragstart', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ el.addEventListener('dragleave', function () {
|
|
|
+ try {
|
|
|
+ document.body.removeChild(tooltipNode)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+export default Tooltip
|