feat: 新增 autotip.css

Auto-Plugin · Apr 23, 2024 · 721cec6 · 721cec6
1 parent 80ff5a4
commit 721cec6
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/autotip.css/index.css b/autotip.css/index.css
@@ -0,0 +1,96 @@
+.autotip {
+  position: fixed;
+  background: #1f1f1f;
+  color: #fff;
+  padding: 5px;
+}
+*[tip] {
+  position: relative;
+}
+*[tip]:hover::before,
+*[tip]:hover::after {
+  opacity: 1;
+}
+*[tip]::before {
+  content: attr(tip);
+  background: #1f1f1f;
+  color: #fff;
+  padding: 5px 8px;
+  border-radius: 5px;
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.2s;
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+  width: max-content;
+  max-width: 246px;
+  z-index: 99;
+}
+*[tip]::after {
+  content: " ";
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 5px);
+  transform: translateY(-50%);
+  margin-left: -5px;
+  border-width: 5px;
+  transition: 0.2s;
+  border-style: solid;
+  pointer-events: none;
+  opacity: 0;
+  border-color: transparent #1f1f1f transparent transparent;
+  z-index: 99;
+}
+*[tip-position="bottom"]::before {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+*[tip-position="bottom"]::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: transparent transparent #1f1f1f transparent;
+}
+*[tip-position="top"]::before {
+  top: unset;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+*[tip-position="top"]::after {
+  top: unset;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: #1f1f1f transparent transparent transparent;
+}
+*[tip-position="left"]::before {
+  top: 50%;
+  left: unset;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+*[tip-position="left"]::after {
+  top: 50%;
+  left: unset;
+  right: calc(100% + 5px);
+  transform: translateY(-50%);
+  margin-left: 0;
+  margin-right: -5px;
+  border-color: transparent transparent transparent #1f1f1f;
+}
+*[tip-position="right"]::before {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+*[tip-position="right"]::after {
+  top: 50%;
+  left: calc(100% + 5px);
+  transform: translateY(-50%);
+  margin-left: -5px;
+  border-color: transparent #1f1f1f transparent transparent;
+}
diff --git a/autotip.css/index.html b/autotip.css/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./index.css" />
+    <style>
+      body {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: flex-start;
+        padding: 200px;
+        overflow-x: hidden;
+      }
+      .demo {
+        position: absolute;
+        top: 120px;
+        cursor: pointer;
+        display: flex;
+        gap: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo">
+      <span tip="你好，这里是autoTip.css" tip-position="top">
+        autoTip.css
+      </span>
+      <span tip="复制这里安装哦" tip-position="top"> npm i autotip.css </span>
+      <span tip="在css中引入" tip-position="top"
+        >@import 'autotip.css/index.css'</span
+      >
+      <span tip="在js中引入" tip-position="top"
+        >import 'autotip.css/index.css'</span
+      >
+      <span tip="抓住红块中的黑点，算你厉害" tip-position="top">???</span>
+    </div>
+  </body>
+</html>
+<script type="module">
+  // import autotip from '../index.js'
+  let elCount = 130;
+  const position = ["top", "right", "bottom", "left"];
+  let radomPosition = () => {
+    return position[Math.floor(Math.random() * position.length)];
+  };
+  for (let i = 0; i < elCount; i++) {
+    let el = document.createElement("div");
+    el.style.width = "100px";
+    el.style.height = "100px";
+    el.style.backgroundColor = "red";
+    el.style.margin = "10px auto";
+    el.setAttribute(
+      "tip",
+      `你好，我是 Elementa ${i}，hello, I am Elementa ${i}，こんにちは，私はElementa ${i}です，Bonjour, je suis Elementa ${i}，안녕하세요, 나는 Elementa ${i}입니다`
+    );
+    el.setAttribute("tip-position", radomPosition());
+    document.body.appendChild(el);
+  }
+  // autotip.init();
+</script>
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
       <div class="productionList">
         <a href="/autoLarryPages/autofit.js">autofit.js</a>
         <a href="/autoLarryPages/autolog.js">autolog.js</a>
+        <a href="/autoLarryPages/autotip.css">autotip.css</a>
       </div>
     </div>
   </body>