♻️ toolptiped

Jane/css/base.scss

@@ -23,8 +23,6 @@
 */
 @import "../../../scss/reset";
 @import "../../../scss/function";
-@import "../../../scss/tooltipped";
-@import "../../../scss/comment";
 @import "../../../scss/nprogress";
 @import "icon";
 @import "vditor/src/assets/scss/classic";

Jane/header.ftl

@@ -19,35 +19,35 @@
 -->
 <header class="header">
     <div class="fn__flex-1">
-        <a href="${servePath}" rel="start" class="tooltipped__w tooltipped" aria-label="${blogTitle}">
+        <a href="${servePath}" rel="start" class="vditor-tooltipped__w vditor-tooltipped" aria-label="${blogTitle}">
             <i class="icon__home"></i>
         </a>
 
         <#list pageNavigations as page>
             <a href="${page.pagePermalink}" target="${page.pageOpenTarget}"
-               class="tooltipped__w tooltipped" rel="section" aria-label="${page.pageTitle}">
+               class="vditor-tooltipped__w vditor-tooltipped" rel="section" aria-label="${page.pageTitle}">
                 <#if page.pageIcon != ''><img src="${page.pageIcon}"><#else>
                     <i class="icon__page"></i>
                 </#if>
             </a>
         </#list>
 
-        <a href="${servePath}/categories.html" rel="section" aria-label="${categoryLabel}" class="tooltipped tooltipped__w">
+        <a href="${servePath}/categories.html" rel="section" aria-label="${categoryLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__category"></i>
         </a>
-        <a href="${servePath}/tags.html" rel="section" aria-label="${allTagsLabel}" class="tooltipped tooltipped__w">
+        <a href="${servePath}/tags.html" rel="section" aria-label="${allTagsLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__tags"></i>
         </a>
-        <a href="${servePath}/archives.html"  aria-label="${archiveLabel}" class="tooltipped tooltipped__w">
+        <a href="${servePath}/archives.html"  aria-label="${archiveLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__inbox"></i>
         </a>
-        <a rel="archive" href="${servePath}/links.html"  aria-label="${linkLabel}" class="tooltipped tooltipped__w">
+        <a rel="archive" href="${servePath}/links.html"  aria-label="${linkLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__link"></i>
         </a>
-        <a href="${servePath}/search" class="tooltipped__w tooltipped" aria-label="${searchLabel}">
+        <a href="${servePath}/search" class="vditor-tooltipped__w vditor-tooltipped" aria-label="${searchLabel}">
             <i class="icon__search"></i>
         </a>
-        <a rel="alternate" href="${servePath}/rss.xml" rel="section" aria-label="RSS" class="tooltipped tooltipped__w">
+        <a rel="alternate" href="${servePath}/rss.xml" rel="section" aria-label="RSS" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__rss"></i>
         </a>
     </div>
@@ -55,21 +55,21 @@
     <div>
          <#if isLoggedIn>
          <a href="${servePath}/admin-index.do#main"
-            aria-label="${adminLabel}" class="tooltipped tooltipped__w">
+            aria-label="${adminLabel}" class="vditor-tooltipped vditor-tooltipped__w">
              <i class="icon__setting"></i>
          </a>
          <a href="${logoutURL}"
-            aria-label="${logoutLabel}" class="tooltipped tooltipped__w">
+            aria-label="${logoutLabel}" class="vditor-tooltipped vditor-tooltipped__w">
              <i class="icon__logout"></i>
          </a>
         <#else>
         <a href="${servePath}/start"
-           aria-label="${startToUseLabel}" class="tooltipped tooltipped__w">
+           aria-label="${startToUseLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__login"></i>
         </a>
         </#if>
         <span onclick="Util.goTop()"
-              aria-label="${putTopLabel}" class="tooltipped tooltipped__w">
+              aria-label="${putTopLabel}" class="vditor-tooltipped vditor-tooltipped__w">
             <i class="icon__up"></i>
         </span>
     </div>

Jane/js/common.js

@@ -47,9 +47,9 @@ var Skin = {
     Util.initPjax(function () {
       $('.header a').each(function () {
         if (this.href === location.href) {
-          this.className = 'current tooltipped tooltipped__w'
+          this.className = 'current vditor-tooltipped vditor-tooltipped__w'
         } else {
-          this.className = 'tooltipped tooltipped__w'
+          this.className = 'vditor-tooltipped vditor-tooltipped__w'
         }
       })
 
@@ -58,11 +58,11 @@ var Skin = {
 
     $('.header a').each(function () {
       if (this.href === location.href) {
-        this.className = 'current tooltipped tooltipped__w'
+        this.className = 'current vditor-tooltipped vditor-tooltipped__w'
       }
     }).click(function () {
       $('.header a').removeClass('current')
-      this.className = 'current tooltipped tooltipped__w'
+      this.className = 'current vditor-tooltipped vditor-tooltipped__w'
     })
   },
 }

Jane/js/common.min.js

@@ -1 +1 @@
-var Skin={initToc:function(){0<$(".b3-solo-list li").length&&768<$(window).width()?($(".b3-solo-list").css({right:"50px","border-right":"1px solid #fff",opacity:1}),$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"})):$("#pjax.wrapper").removeAttr("style")},init:function(){Skin.initToc(),Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current tooltipped tooltipped__w":this.className="tooltipped tooltipped__w"}),Skin.initToc()}),$(".header a").each(function(){this.href===location.href&&(this.className="current tooltipped tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current tooltipped tooltipped__w"})}};Skin.init();
+var Skin={initToc:function(){0<$(".b3-solo-list li").length&&768<$(window).width()?($(".b3-solo-list").css({right:"50px","border-right":"1px solid #fff",opacity:1}),$("#pjax.wrapper").css({"max-width":"968px","padding-right":"270px"})):$("#pjax.wrapper").removeAttr("style")},init:function(){Skin.initToc(),Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current vditor-tooltipped vditor-tooltipped__w":this.className="vditor-tooltipped vditor-tooltipped__w"}),Skin.initToc()}),$(".header a").each(function(){this.href===location.href&&(this.className="current vditor-tooltipped vditor-tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current vditor-tooltipped vditor-tooltipped__w"})}};Skin.init();

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>

NeoEase/js/NeoEase.min.js

@@ -1 +1 @@
-var goTop=function(e){e=e||.1;var a=$(window).scrollTop(),t=1+e;if(window.scrollTo(0,Math.floor(a/t)),0<a){var n="goTop("+e+")";window.setTimeout(n,16)}},collapseArchive=function(e,a){var t=!0;"collapse-ico"===e.className?(e.className="expand-ico",t=!1):e.className="collapse-ico",$("#archiveSide li").each(function(){$(this).data("year")===a&&(t?$(this).show():$(this).hide())})},getArticle=function(t,e){var n=$("#abstract"+e),i=$("#content"+e);return""===i.html()?$.ajax({url:"/get-article-content?id="+e,type:"GET",dataType:"html",beforeSend:function(){n.css("background","url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent")},success:function(e,a){t.className="collapse-ico",i.html(e),n.hide().css("background","none"),i.fadeIn("slow")}}):"expand-ico"===t.className?(n.hide(),i.fadeIn(),t.className="collapse-ico"):(i.hide(),n.fadeIn(),t.className="expand-ico"),!1},goTranslate=function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)};!function(){$(window).scroll(function(){var e=$(window).scrollTop();if(182<e){var a=$(window).height(),t=e+a-21;$("body").height()-58<=e+a&&(t=$(".footer").offset().top-21),$("#goTop").fadeIn("slow").css("top",t)}else $("#goTop").hide()});var t=(new Date).getFullYear(),n=t;$("#archiveSide li").each(function(e){var a=$(this);a.data("year")!==t&&$(this).hide(),n!==a.data("year")&&(n=a.data("year"),a.before("<li class='archive-year'><div onclick='collapseArchive(this, "+n+")' class='expand-ico'>"+n+"&nbsp;年</div></li>"))}),$(".recent-comments .expand-ico").click(function(){"expand-ico"===this.className?($(this).parent().next().css({height:"auto","white-space":"normal"}),this.className="collapse-ico"):($(this).parent().next().animate({height:"18px"},function(){$(this).css("white-space","nowrap")}),this.className="expand-ico")}),$(".nav ul li").each(function(){$(this).find("a").attr("href")===Label.servePath+location.pathname?$(this).addClass("current"):/\/[0-9]+$/.test(location.pathname)&&($(".nav ul li")[0].className="current")}),Util.setTopBar(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),$(".recent-comments .recent-comments-main").each(function(){$(this).find(".recent-comments-content>a").height()<30?$(this).find(".expand-ico").remove():$(this).find(".expand-ico").parent().next().css({"white-space":"nowrap"})})}();
+var goTop=function(e){e=e||.1;var a=$(window).scrollTop(),t=1+e;if(window.scrollTo(0,Math.floor(a/t)),0<a){var n="goTop("+e+")";window.setTimeout(n,16)}},collapseArchive=function(e,a){var t=!0;"collapse-ico"===e.className?(e.className="expand-ico",t=!1):e.className="collapse-ico",$("#archiveSide li").each(function(){$(this).data("year")===a&&(t?$(this).show():$(this).hide())})},getArticle=function(t,e){var n=$("#abstract"+e),o=$("#content"+e);return""===o.html()?$.ajax({url:"/get-article-content?id="+e,type:"GET",dataType:"html",beforeSend:function(){n.css("background","url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent")},success:function(e,a){t.className="collapse-ico",o.html(e),n.hide().css("background","none"),o.fadeIn("slow")}}):"expand-ico"===t.className?(n.hide(),o.fadeIn(),t.className="collapse-ico"):(o.hide(),n.fadeIn(),t.className="expand-ico"),!1},goTranslate=function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)};$(document).ready(function(){$(window).scroll(function(){var e=$(window).scrollTop();if(182<e){var a=$(window).height(),t=e+a-21;$("body").height()-58<=e+a&&(t=$(".footer").offset().top-21),$("#goTop").fadeIn("slow").css("top",t)}else $("#goTop").hide()});var t=(new Date).getFullYear(),n=t;$("#archiveSide li").each(function(e){var a=$(this);a.data("year")!==t&&$(this).hide(),n!==a.data("year")&&(n=a.data("year"),a.before("<li class='archive-year'><div onclick='collapseArchive(this, "+n+")' class='expand-ico'>"+n+"&nbsp;年</div></li>"))}),$(".recent-comments .expand-ico").click(function(){"expand-ico"===this.className?($(this).parent().next().css({height:"auto","white-space":"normal"}),this.className="collapse-ico"):($(this).parent().next().animate({height:"18px"},function(){$(this).css("white-space","nowrap")}),this.className="expand-ico")}),$(".nav ul li").each(function(){$(this).find("a").attr("href")===Label.servePath+location.pathname?$(this).addClass("current"):/\/[0-9]+$/.test(location.pathname)&&($(".nav ul li")[0].className="current")}),Util.setTopBar(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),$(".recent-comments .recent-comments-main").each(function(){$(this).find(".recent-comments-content>a").height()<30?$(this).find(".expand-ico").remove():$(this).find(".expand-ico").parent().next().css({"white-space":"nowrap"})})});

Pinghsu/article.ftl

@@ -134,20 +134,20 @@
             <span class="post__arrow">
                 <#if previousArticlePermalink??>
                 <a href="${servePath}${previousArticlePermalink}" rel="prev"
-                   class="tooltipped__n tooltipped"
+                   class="vditor-tooltipped__n vditor-tooltipped"
                    pjax-title="${previousArticleTitle}"
                    aria-label="${previousArticleLabel}: ${previousArticleTitle}">←</a>
                 </#if>
 
                 <#if nextArticlePermalink??>
                  <a href="${servePath}${nextArticlePermalink}" rel="next"
-                    class="tooltipped__n tooltipped"
+                    class="vditor-tooltipped__n vditor-tooltipped"
                     pjax-title="${nextArticleTitle}"
                     aria-label="${nextArticleLabel}: ${nextArticleTitle}">→</a>
                 </#if>
-                <a href="javascript:Util.goTop()" class="tooltipped__n tooltipped"
+                <a href="javascript:Util.goTop()" class="vditor-tooltipped__n vditor-tooltipped"
                    aria-label="${goTopLabel}">↑</a>
-                <a href="javascript:Util.goBottom()" class="tooltipped__n tooltipped"
+                <a href="javascript:Util.goBottom()" class="vditor-tooltipped__n vditor-tooltipped"
                    aria-label="${goBottomLabel}">↓</a>
             </span>
         </div>

Pinghsu/css/base.scss

@@ -23,8 +23,6 @@
 */
 @import "../../../scss/reset";
 @import "../../../scss/function";
-@import "../../../scss/tooltipped";
-@import "../../../scss/comment";
 @import "../../../scss/nprogress";
 @import "icon";
 @import "vditor/src/assets/scss/classic";

Pinghsu/footer.ftl

@@ -47,7 +47,7 @@
                 <#list mostUsedCategories as category>
                     <a href="${servePath}/category/${category.categoryURI}"
                        aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
-                       class="ft__link ft__nowrap tooltipped tooltipped__n">
+                       class="ft__link ft__nowrap vditor-tooltipped vditor-tooltipped__n">
                         ${category.categoryTitle}</a> &nbsp; &nbsp;
                 </#list>
             </div>

nijigen/article-list.ftl

@@ -20,7 +20,7 @@
 <div class="article-list">
     <#list articles as article>
     <article class="item <#if article_index &lt; 3>item--active</#if>">
-        <time class="tooltipped tooltipped__n item__date"
+        <time class="vditor-tooltipped vditor-tooltipped__n item__date"
               aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
             ${article.articleCreateDate?string("MM")}${monthLabel}
             <span class="item__day">${article.articleCreateDate?string("dd")}</span>

nijigen/article.ftl

@@ -56,7 +56,7 @@
     <main id="articlePage">
         <div class="article-list">
             <div class="item item--active">
-                <time class="tooltipped tooltipped__n item__date"
+                <time class="vditor-tooltipped vditor-tooltipped__n item__date"
                       aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
                 ${article.articleCreateDate?string("MM")}${monthLabel}
                     <span class="item__day">${article.articleCreateDate?string("dd")}</span>

nijigen/category-articles.ftl

@@ -41,7 +41,7 @@
                 <i class="icon__category"></i>
                 ${categoryLabel}
                 &nbsp; > &nbsp;
-                <span class="tooltipped tooltipped__w"
+                <span class="vditor-tooltipped vditor-tooltipped__w"
                       aria-label="${category.categoryDescription}">${category.categoryTitle}</span>
             </div>
         </div>

nijigen/css/base.scss

@@ -23,8 +23,6 @@
 */
 @import "../../../scss/reset";
 @import "../../../scss/function";
-@import "../../../scss/tooltipped";
-@import "../../../scss/comment";
 @import "../../../scss/nprogress";
 @import "icon";
 @import "vditor/src/assets/scss/classic";

nijigen/side.ftl

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