diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js index be806535..9d4a1cf2 100644 --- a/_src/_assets/js/_search.js +++ b/_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'), diff --git a/_src/_assets/js/_tooltips.js b/_src/_assets/js/_tooltips.js new file mode 100644 index 00000000..96976943 --- /dev/null +++ b/_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: '', + container: 'body' + }) + } + }; + + app = { + init: function() { + _private.tooltipsShow(); + } + }; + + return app; + +})(window, document); diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index 33f498f1..bcbef5a2 100644 --- a/_src/_assets/js/app.js +++ b/_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 diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl index 2306cc6c..21986684 100644 --- a/_src/_assets/styl/kremalicious3.styl +++ b/_src/_assets/styl/kremalicious3.styl @@ -43,6 +43,7 @@ @import 'header' @import 'navigation' @import 'search' +@import 'tooltips' @import 'footer' // Print diff --git a/_src/_assets/styl/tooltips.styl b/_src/_assets/styl/tooltips.styl new file mode 100644 index 00000000..62b35e5e --- /dev/null +++ b/_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 diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl index 603c9b85..6211ee27 100644 --- a/_src/_assets/styl/variables.styl +++ b/_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%) diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html index 2b1192bc..5821b588 100644 --- a/_src/_includes/articles.html +++ b/_src/_includes/articles.html @@ -22,7 +22,7 @@ - + diff --git a/_src/_includes/header.html b/_src/_includes/header.html index 3e007bac..a59dc110 100644 --- a/_src/_includes/header.html +++ b/_src/_includes/header.html @@ -12,7 +12,7 @@