Add tooltip to footer icons

data/browser-action/css/style.scss

@@ -174,32 +174,20 @@ footer {
         .left { float: left; }
         .right { float: right; }
 
-        .btn, .btn-sm-round {
+        .btn-sm-round {
             cursor: default;
             color: #fff;
             display: inline-block;
             text-decoration: none;
+            border-radius: 50%;
+            margin-right: 2px;
+            padding: 7px;
 
             &:hover {
                 color: $color-primary;
                 background-color: rgba(#fff, 0.95);
             }
         }
-        .btn {
-            padding: 3px 5px;
-            margin: 4px 0;
-            font-size: 13px;
-            border-radius: 2px;
-
-            i {
-                vertical-align: middle;
-            }
-        }
-        .btn-sm-round {
-            border-radius: 50%;
-            margin-right: 2px;
-            padding: 7px;
-        }
     }
 }
 

data/browser-action/index.html

@@ -37,13 +37,11 @@ <h1>MaterialDesignIcons Picker</h1>
             </a>
         </div>
         <div class="right">
-            <a class="btn" href="https://www.s-quent.in" target="_blank">
+            <a id="action-author" class="btn-sm-round" href="https://www.s-quent.in" target="_blank">
                 <i class="mdi mdi-account"></i>
-                <span class="x-btn-inner">Quentin S.</span>
             </a>
-            <a class="btn" href="https://github.com/chteuchteu/MaterialDesignIcons-Picker" target="_blank">
+            <a id="action-github" class="btn-sm-round" href="https://github.com/chteuchteu/MaterialDesignIcons-Picker" target="_blank">
                 <i class="mdi mdi-github-circle"></i>
-                <span class="x-btn-inner">GitHub</span>
             </a>
         </div>
         <div class="clearfix"></div>

data/browser-action/js/component-tooltip.js

@@ -17,30 +17,37 @@
             this.settings = $.extend({}, this.defaults, this.options);
             var self = this;
 
+            this.body = $('body');
+
             // Prepare tooltip (once)
             this.tooltip = $('.tooltip');
             if (!this.tooltip.length) {
                 this.tooltip = $('<div />')
                     .addClass('tooltip')
                     .hide()
-                    .appendTo($('body'));
+                    .appendTo(this.body);
             }
 
             if (typeof this.settings.text != 'string')
                 this.settings.text = this.settings.text(this.elem);
 
             this.elem.mouseenter(function() {
                 var tooltip = self.tooltip,
-                    elem = self.elem;
+                    elem = self.elem,
+                    body = self.body;
 
                 self.tooltip.text(self.settings.text);
 
                 // Show tooltip so we can get its width
                 tooltip.show();
 
                 // Compute position
-                var top = elem.position().top + elem.outerHeight(true),
-                    left = elem.position().left + elem.outerWidth(true)/2 - tooltip.outerWidth(true) / 2;
+                var elemOuterHeight = elem.outerHeight(true),
+                    elemOuterWidth = elem.outerWidth(true),
+                    tooltipOuterWidth = tooltip.outerWidth(true),
+                    tooltipOuterHeight = tooltip.outerHeight(true),
+                    top = elem.position().top + elemOuterHeight,
+                    left = elem.position().left + elemOuterWidth/2 - tooltipOuterWidth / 2;
 
                 tooltip
                     .css('top', top)
@@ -49,8 +56,11 @@
                 // Check if tooltip is out of viewport
                 if (left < 0)
                     tooltip.css('left', 5);
-                else if (left + tooltip.outerWidth(true) > $('body').width())
-                    tooltip.css('left', $('body').width() - tooltip.outerWidth(true) - 5);
+                else if (left + tooltipOuterWidth > body.width())
+                    tooltip.css('left', body.width() - tooltipOuterWidth - 15);
+
+                if (top + tooltipOuterHeight > body.height())
+                    tooltip.css('top', elem.position().top - tooltipOuterHeight - 3);
             }).mouseleave(function() {
                 self.tooltip.hide();
             })

data/browser-action/js/script.js

@@ -54,7 +54,9 @@ var params = {
                 },
                 footer: {
                     openInMaterialdesignIcons: $('#action-open-in-materialdesignicons'),
-                    refresh: $('#action-refresh')
+                    refresh: $('#action-refresh'),
+                    author: $('#action-author'),
+                    github: $('#action-github')
                 }
             };
 
@@ -87,6 +89,7 @@ var params = {
                 });
             });
 
+            // Refresh button
             this.ui.footer.refresh.click(function(e) {
                 e.preventDefault();
 
@@ -144,6 +147,12 @@ var params = {
 
                 e.preventDefault();
             });
+
+            // Footer tooltips
+            this.ui.footer.openInMaterialdesignIcons.tooltip({text: 'Open in MaterialDesignIcons.com'});
+            this.ui.footer.refresh.tooltip({text: 'Refresh'});
+            this.ui.footer.author.tooltip({text: 'Quentin S.'});
+            this.ui.footer.github.tooltip({text: 'GitHub'});
         },
 
         retrieveIconsList: function() {