Tooltip added for sidemenu subitems

src/core/render/tpl.js

@@ -93,7 +93,12 @@ export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
 
   let innerHTML = '';
   toc.forEach(node => {
-    innerHTML += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`;
+    innerHTML += `<li>
+        <div class="tooltip">
+          <span class="tooltiptext">${node.title}</span>
+          <a class="section-link" href="${node.slug}">${node.title}</a>
+        </div>
+      </li>`;
     if (node.children) {
       innerHTML += tree(node.children, tpl);
     }

src/themes/basic/_layout.styl

@@ -12,6 +12,40 @@ body:not(.ready)
   [data-cloak], .app-nav, > nav
     display none
 
+.tooltip {
+	position: relative;
+}
+
+.tooltip .tooltiptext {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
+	-webkit-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
+	-o-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
+	-moz-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
+	visibility: hidden;
+	background-color: black;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 5px;
+	position: absolute;
+	z-index: 21;
+	bottom: 100%;
+	left: 50%;
+	margin-left: -105px;
+}
+
+.tooltip:hover .tooltiptext {
+	visibility: visible;
+	opacity: 1;
+}
+
+.tooltip .tooltiptext:hover {
+	visibility: hidden;
+}
+
+
 div#app
   font-size 30px
   font-weight lighter

src/themes/vue.styl

@@ -11,6 +11,10 @@ $sidebar-width = 300px
 body
   background-color $color-bg
 
+.tooltip .tooltiptext {
+  margin-left: -120px;
+}
+
 /* sidebar */
 .sidebar
   background-color $color-bg