黑色提示框

css/main.css

@@ -396,3 +396,31 @@ a{
 .custom-file-input:lang(zh) ~ .custom-file-label::after {
     content: "浏览";
 }
+
+.message-box {
+    position:absolute;
+    background:#000;
+    padding:8px 10px;
+    line-height: 18px;
+    border-radius:4px;
+    text-align:center;
+    box-shadow:2px 2px 6px #ccc;
+    color:#fff;
+}
+.triangle-border {
+    position:absolute;
+    left:10px;
+    overflow:hidden;
+    width:0;
+    height:0;
+    border-width:6px;
+    border-style:solid dashed dashed dashed;
+}
+.tb-border {
+    bottom:-12px;
+    border-color:#000 transparent transparent transparent;
+}
+.tb-background {
+    bottom:-11px;
+    border-color:#000 transparent transparent transparent;
+}

zaojiashu.html

@@ -279,6 +279,23 @@
                               <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#zlfb">右键“整理分部”</a>
                               <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#jqaz">右键“计取安装费用”</a>
                               <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#ntwz">粘帖位置选择</a>
+                              <p>
+                              <!-- HTML to write -->
+<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip bs-tooltip-top top" role="tooltip" style="will-change:transform;position: absolute;transform: translate3d(13px);">
+  <div class="arrow"></div>
+  <div class="tooltip-inner">
+    Some tooltip text!
+  </div>
+</div>
+<div class="message-box">
+  <span>我是利用 border 属性实现的我,是利用 border </span>
+  <div class="triangle-border tb-border"></div>
+  <div class="triangle-border tb-background"></div>
+</div>
+                              </p>
                             </div>
                         </div>
                         <div class="bottom-content">