♻️ toolptiped

Medium/article.ftl

@@ -100,7 +100,7 @@
                     <a class="post__view" href="${servePath}${article.articlePermalink}">
                     ${article.articleViewCount} ${viewLabel}</a>
                     <div class="fn-right">
-                    <span class="pipe-tooltipped pipe-tooltipped--n post__share-icon ft-green"
+                    <span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
                           onclick="$('#comment').focus()"
                           aria-label="${commentLabel}">
                         <svg>
@@ -149,7 +149,7 @@
                 ${article.articleViewCount} ${viewLabel}
                 </a>
                 <div class="fn-right">
-                <span class="pipe-tooltipped pipe-tooltipped--n post__share-icon ft-green"
+                <span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
                       onclick="$('#comment').focus()"
                       aria-label="${commentLabel}">
                     <svg>
@@ -188,7 +188,7 @@
         </div>
 
         <div class="post__side">
-        <span class="pipe-tooltipped pipe-tooltipped--e post__share-icon ft-green"
+        <span class="vditor-tooltipped vditor-tooltipped__e post__share-icon ft-green"
               onclick="$('#comment').focus()"
               aria-label="${commentLabel}">
             <span class="ft-gray">${article.articleCommentCount}</span>

Medium/bottom.ftl

@@ -25,7 +25,7 @@
         </div>
         <div>
             <#list mostUsedCategories as category>
-                <a class="tag pipe-tooltipped pipe-tooltipped--n"
+                <a class="tag vditor-tooltipped vditor-tooltipped__n"
                    aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
                    href="${servePath}/category/${category.categoryURI}">${category.categoryTitle}</a>
             </#list>
@@ -40,7 +40,7 @@
         <div>
             <#list mostUsedTags as tag>
                 <a rel="tag"
-                   class="tag pipe-tooltipped pipe-tooltipped--n"
+                   class="tag vditor-tooltipped vditor-tooltipped__n"
                    aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
                    href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
             </#list>

Medium/bottom2.ftl

@@ -20,7 +20,7 @@
 <div class="footer__tag wrapper">
 <#if 0 != mostUsedCategories?size>
     <#list mostUsedCategories as category>
-        <a class="tag pipe-tooltipped pipe-tooltipped--n"
+        <a class="tag vditor-tooltipped vditor-tooltipped__n"
            aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
            href="${servePath}/category/${category.categoryURI}">${category.categoryTitle}</a>
     </#list>
@@ -28,7 +28,7 @@
 <#if 0 != mostUsedTags?size>
     <#list mostUsedTags as tag>
         <a rel="tag"
-           class="tag pipe-tooltipped pipe-tooltipped--n"
+           class="tag vditor-tooltipped vditor-tooltipped__n"
            aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
            href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
     </#list>

Medium/css/base.scss

@@ -73,149 +73,6 @@
   color: #018f69 !important
 }
 
-.pipe-tooltipped {
-  position: relative;
-  cursor: pointer
-}
-
-.pipe-tooltipped::after {
-  position: absolute;
-  z-index: 1000;
-  display: none;
-  padding: 5px 8px;
-  font-size: 11px;
-  font-weight: normal;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-  content: attr(aria-label);
-  background: rgba(0, 0, 0, 0.8);
-  border-radius: 3px;
-  line-height: 16px;
-  opacity: 0
-}
-
-.pipe-tooltipped::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0;
-  height: 0;
-  color: rgba(0, 0, 0, 0.8);
-  pointer-events: none;
-  content: "";
-  border: 5px solid transparent;
-  opacity: 0
-}
-
-@keyframes tooltip-appear {
-  from {
-    opacity: 0
-  }
-
-  to {
-    opacity: 1
-  }
-}
-
-.pipe-tooltipped:hover::before, .pipe-tooltipped:hover::after, .pipe-tooltipped:active::before, .pipe-tooltipped:active::after, .pipe-tooltipped:focus::before, .pipe-tooltipped:focus::after {
-  display: inline-block;
-  text-decoration: none;
-  animation-name: tooltip-appear;
-  animation-duration: 0.1s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-  animation-delay: 0.4s
-}
-
-.pipe-tooltipped--s::after, .pipe-tooltipped--se::after, .pipe-tooltipped--sw::after {
-  top: 100%;
-  right: 50%;
-  margin-top: 5px
-}
-
-.pipe-tooltipped--s::before, .pipe-tooltipped--se::before, .pipe-tooltipped--sw::before {
-  top: auto;
-  right: 50%;
-  bottom: -5px;
-  margin-right: -5px;
-  border-bottom-color: rgba(0, 0, 0, 0.8)
-}
-
-.pipe-tooltipped--se::after {
-  right: auto;
-  left: 50%;
-  margin-left: -15px
-}
-
-.pipe-tooltipped--sw::after {
-  margin-right: -15px
-}
-
-.pipe-tooltipped--n::after, .pipe-tooltipped--ne::after, .pipe-tooltipped--nw::after {
-  right: 50%;
-  bottom: 100%;
-  margin-bottom: 5px
-}
-
-.pipe-tooltipped--n::before, .pipe-tooltipped--ne::before, .pipe-tooltipped--nw::before {
-  top: -5px;
-  right: 50%;
-  bottom: auto;
-  margin-right: -5px;
-  border-top-color: rgba(0, 0, 0, 0.8)
-}
-
-.pipe-tooltipped--ne::after {
-  right: auto;
-  left: 50%;
-  margin-left: -15px
-}
-
-.pipe-tooltipped--nw::after {
-  margin-right: -15px
-}
-
-.pipe-tooltipped--s::after, .pipe-tooltipped--n::after {
-  transform: translateX(50%)
-}
-
-.pipe-tooltipped--w::after {
-  right: 100%;
-  bottom: 50%;
-  margin-right: 5px;
-  transform: translateY(50%)
-}
-
-.pipe-tooltipped--w::before {
-  top: 50%;
-  bottom: 50%;
-  left: -5px;
-  margin-top: -5px;
-  border-left-color: rgba(0, 0, 0, 0.8)
-}
-
-.pipe-tooltipped--e::after {
-  bottom: 50%;
-  left: 100%;
-  margin-left: 5px;
-  transform: translateY(50%)
-}
-
-.pipe-tooltipped--e::before {
-  top: 50%;
-  right: -5px;
-  bottom: 50%;
-  margin-top: -5px;
-  border-right-color: rgba(0, 0, 0, 0.8)
-}
-
 .tag {
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.68);

Medium/header.ftl

@@ -85,13 +85,13 @@
 
         <div class="fn-right">
             <a href="${servePath}/search" aria-label="${searchLabel}"
-               class="pipe-tooltipped pipe-tooltipped--w header__icon">
+               class="vditor-tooltipped vditor-tooltipped__w header__icon">
                 <svg>
                     <use xlink:href="#icon-search"></use>
                 </svg>
             </a>
         <#if isLoggedIn>
-            <a class="avatar pipe-tooltipped pipe-tooltipped--w header__icon" aria-label="${adminLabel}"
+            <a class="avatar vditor-tooltipped vditor-tooltipped__w header__icon" aria-label="${adminLabel}"
                href="${servePath}/admin-index.do#main"
                style="background-image: url(${adminUser.userAvatar});"></a>
         <#else>