icon tooltips

_src/_assets/js/_search.js

@@ -1,3 +1,6 @@
+
+//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.js
+
 var Search = (function(w, d) {
 
     var content       = $('.site__content'),

_src/_assets/js/_tooltips.js

@@ -0,0 +1,26 @@
+
+//=require ../../../node_modules/bootstrap/js/tooltip.js
+
+var Tooltips = (function(w, d) {
+
+    var app, _private;
+
+    _private = {
+        tooltipsShow: function() {
+            $('[data-toggle="tooltip"]').tooltip({
+                placement: 'bottom',
+                template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>',
+                container: 'body'
+            })
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.tooltipsShow();
+        }
+    };
+
+    return app;
+
+})(window, document);

_src/_assets/js/app.js

@@ -3,13 +3,14 @@
 //=require ../../../node_modules/svg4everybody/dist/svg4everybody.js
 //=require ../../../node_modules/jquery/dist/jquery.js
 //=require ../../../bower_components/time-elements/time-elements.js
-//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.js
+
 
 //
 // include modules
 //
 //=include _menu.js
 //=include _search.js
+//=include _tooltips.js
 
 (function($) {
 
@@ -18,6 +19,7 @@
     //
     Menu.init();
     Search.init();
+    Tooltips.init();
 
     svg4everybody({
         nosvg: false

_src/_assets/styl/kremalicious3.styl

@@ -43,6 +43,7 @@
 @import 'header'
 @import 'navigation'
 @import 'search'
+@import 'tooltips'
 @import 'footer'
 
 // Print

_src/_assets/styl/tooltips.styl

@@ -0,0 +1,52 @@
+//
+// kremalicious3
+// --------------
+// Tooltips
+//
+
+// Base class
+.tooltip
+    position: absolute
+    z-index: 1000
+    display: block
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    font-family: $font-family-base;
+    // We deliberately do NOT reset font-size.
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-break: auto;
+    line-height: $line-height-base;
+    text-align: left; // Fallback for where `start` is not supported
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    white-space: normal;
+    word-break: normal;
+    word-spacing: normal;
+    word-wrap: normal;
+    font-size: $font-size-mini
+
+    opacity: 0
+
+    &.in
+        opacity: .8
+    &.top
+        margin-top:  -1px
+    &.right
+        margin-left:  1px
+    &.bottom
+        margin-top:   1px
+    &.left
+        margin-left: -1px
+
+// Wrapper for the tooltip content
+.tooltip-inner
+    max-width: 120px
+    padding: 4px 8px
+    color: $tooltip-color
+    text-align: center
+    background-color: $tooltip-bg
+    border-radius: $border-radius-base

_src/_assets/styl/variables.styl

@@ -164,3 +164,10 @@ $breakpoint3                = 'only screen and (min-width: 87.500em)'
 
 $highDPI                    = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
 $highDPI_3x                 = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '
+
+
+// Tooltips
+/////////////////////////////////////
+
+$tooltip-color              = #fff
+$tooltip-bg                 = darken($brand-dark, 15%)

_src/_includes/articles.html

@@ -22,7 +22,7 @@
                         <use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
                     </svg>
                 </a>
-                <a class="permalink-link" href="{{ post.url }}" rel="tooltip" title="Permalink">
+                <a class="permalink-link" href="{{ post.url }}" data-toggle="tooltip" title="Permalink">
                     <svg class="icon icon-entypo icon-entypo-infinity">
                         <use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use>
                     </svg>

_src/_includes/header.html

@@ -12,7 +12,7 @@
                 </div>
 
                 <nav role="navigation" class="nav-main grid__col">
-                    <button type="button" class="menu-btn">
+                    <button type="button" class="menu-btn" data-toggle="tooltip" title="Menu">
                         <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
                             <title id="title">Menu</title>
                             <use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
@@ -21,7 +21,7 @@
                 </nav>
 
                 <section class="site-search">
-                    <button type="button" class="search-btn">
+                    <button type="button" class="search-btn" data-toggle="tooltip" title="Search">
                         <svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
                             <title id="title">Search</title>
                             <use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>

_src/_includes/scripts.html

@@ -41,7 +41,6 @@
 
             // Send initial pageview
             ga('send', 'pageview');
-        }
 
             // Track uncaught errors
             window.onerror = function(message, url, line, col) {
@@ -53,6 +52,7 @@
                     exFatal: false
                 });
             };
+        }        
 
     }(window, navigator.doNotTrack || navigator.msDoNotTrack || null));
 </script>

package.json

@@ -22,6 +22,7 @@
     "webcomponents.js": ">=0.7.1"
   },
   "devDependencies": {
+    "bootstrap": "^3.3.6",
     "browser-sync": ">=2.10.0",
     "chalk": ">=1.0.0",
     "concurrent-transform": ">=1.0.0",