update

src/badge/index.js

@@ -12,18 +12,6 @@ class Badge extends Component {
     max: 0
   }
 
-  get #value() {
-    if (this.value > 0) {
-      if (this.max > 0) {
-        if (this.value > this.max) {
-          return this.max + '+'
-        }
-      }
-      return this.value
-    }
-    return ''
-  }
-
   static styles = [
     css`
       :host {
@@ -90,6 +78,18 @@ class Badge extends Component {
     `
   ]
 
+  get #value() {
+    if (this.value > 0) {
+      if (this.max > 0) {
+        if (this.value > this.max) {
+          return this.max + '+'
+        }
+      }
+      return this.value
+    }
+    return ''
+  }
+
   render() {
     return html`
       <main class="container">

src/tooltip/index.js

@@ -0,0 +1,132 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/21 16:14:10
+ */
+
+import { css, html, Component, bind, styleMap, offset } from 'wkit'
+
+class Tooltip extends Component {
+  static props = {
+    title: 'str!'
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+      }
+
+      .container {
+        position: relative;
+      }
+
+      .tooltip {
+        display: none;
+        position: fixed;
+        z-index: 9;
+        justify-content: center;
+        align-items: center;
+        max-width: 360px;
+        min-width: 32px;
+        padding: 6px 8px;
+        border-radius: 3px;
+        font-size: var(--wc-tooltip-font, 14px);
+        background: var(--wc-tooltip-background, #fff);
+        color: var(--wc-tooltip-color, var(--color-dark-1));
+        box-shadow: 0 0 3px var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.2));
+        word-break: break-all;
+        -webkit-user-select: none;
+        user-select: none;
+
+        &::after {
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          border-radius: 2px;
+          background: var(--wc-tooltip-background, #fff);
+          content: '';
+          transform: rotate(45deg);
+        }
+
+        &[placement='left-top'] {
+          &::after {
+            right: 16px;
+            bottom: -4px;
+          }
+        }
+        &[placement='left-bottom'] {
+          &::after {
+            right: 16px;
+            top: -4px;
+          }
+        }
+        &[placement='right-top'] {
+          &::after {
+            left: 16px;
+            bottom: -4px;
+          }
+        }
+        &[placement='right-bottom'] {
+          &::after {
+            left: 16px;
+            top: -4px;
+          }
+        }
+      }
+    `
+  ]
+
+  mounted() {
+    console.log(this.clientWidth, this.offsetHeight)
+    bind(this.$refs.wrap, 'mouseenter', ev => {
+      console.log(ev.pageX, ev.pageY)
+      let { left, top } = offset(this)
+      let placement = 'left'
+      let styles = { display: 'block' }
+
+      if (left < 200 || left + this.clientWidth < 360) {
+        placement = 'right'
+        styles.left = left + 'px'
+      } else {
+        let right = window.innerWidth - left - this.clientWidth
+        console.log('right: ', right)
+
+        styles.right = right + 'px'
+      }
+
+      top += 8 + this.clientHeight
+      if (top < 100) {
+        placement += '-bottom'
+        styles.top = top + 'px'
+      } else {
+        // top -= 8
+        placement += '-top'
+        styles.bottom = top + 'px'
+      }
+      console.log(placement)
+      //
+      this.$refs.tips.setAttribute('placement', placement)
+      this.$refs.tips.style.cssText = styleMap(styles)
+    })
+    bind(this.$refs.wrap, 'mouseleave', ev => {
+      console.log(ev.pageX, ev.pageY)
+      //
+      this.$refs.tips.style.cssText = styleMap({ display: 'none' })
+    })
+  }
+
+  render() {
+    return html`
+      <main class="container" ref="wrap">
+        <div class="wrapper"><slot></slot></div>
+        <div class="tooltip" ref="tips">
+          <slot name="title">${this.title}</slot><i class="trigon"></i>
+        </div>
+      </main>
+    `
+  }
+}
+
+Tooltip.reg('tooltip')