Add Support for Tooltips on Categories and Tags.

NooBxGockeL · NooBxGockeL · commit 0d67f61fd08d · 2016-01-16T21:44:53.000+01:00
This will hopefully clear up the confusion some, especially newcomer, could have.
diff --git a/pages/patterns.html b/pages/patterns.html
@@ -57,7 +57,11 @@
         All<span class="my-badge"> {{ allPatterns | size }}</span>
       </a>
       {% for category in site.data.categories %}
-      <a href="javascript:;" class="sidebar-list-item cat-button" category="{{ category.name }}">
+      <a href="javascript:;" class="sidebar-list-item cat-button" category="{{ category.name }}"
+        <!-- add tooltip only if we have something to display -->
+        {% if category.description %}
+          data-toggle="tooltip" data-placement="left" title="{{ category.description }}"
+        {% endif %}<!-- /tooltip, close the a tag now --> >
         {{ category.name }} <span class="my-badge">
           {% assign counter=0 %}
           {% for page in allPatterns %}
@@ -80,7 +84,11 @@
         All<span class="my-badge"> {{ allPatterns | size }}</span>
       </a>
       {% for tag in site.data.tags %}
-      <a href="javascript:;" class="sidebar-list-item tag-button" tag="{{ tag.name }}">
+      <a href="javascript:;" class="sidebar-list-item tag-button" tag="{{ tag.name }}"
+        <!-- add tooltip only if we have something to display -->
+        {% if tag.description %}
+          data-toggle="tooltip" data-placement="left" title="{{ tag.description }}"
+        {% endif %}<!-- /tooltip, close the a tag now --> >
         {{ tag.name }} <span class="my-badge">
           {% assign counter=0 %}
           {% for page in allPatterns %}
diff --git a/static/css/index.scss b/static/css/index.scss
@@ -437,3 +437,7 @@ hr.dashed  {
 .float-right {
     float: right;
 }
+
+.tooltip {
+    font-weight: 500;
+}
diff --git a/static/js/index.js b/static/js/index.js
@@ -2,6 +2,7 @@ $(document).ready(function() {
     categoryAndTagDisplay();
     generateContent();
     backToTop();
+    initBootstrapTooltips();
 });
 
 function fixFooterInit() {
@@ -68,7 +69,6 @@ function backToTop() {
     });
 }
 
-
 function generateContent() {
 
     // console.log($('#markdown-toc').html());
@@ -86,3 +86,8 @@ function generateContent() {
     }
     console.log("myAffix!!!");
 }
+
+function initBootstrapTooltips() {
+    // Select all elements with data-toggle="tooltips" in the document
+    $('[data-toggle="tooltip"]').tooltip();
+}

Original file line number	Diff line number	Diff line change
`@@ -437,3 +437,7 @@ hr.dashed {`
`437`	`437`	`.float-right {`
`438`	`438`	`float: right;`
`439`	`439`	`}`
	`440`	`+`
	`441`	`+.tooltip {`
	`442`	`+ font-weight: 500;`
	`443`	`+}`