Introducing widget tooltip for any widget

.scss-lint.yml

@@ -89,7 +89,7 @@ linters:
   PropertyCount:
     enabled: true
     include_nested: false
-    max_properties: 15
+    max_properties: 18
     severity: warning
   PropertySortOrder:
     enabled: true

src/geo/ui/widgets/category/title/search_title_template.tpl

@@ -10,13 +10,15 @@
   <div class="CDB-Widget-title CDB-Widget-contentSpaced">
     <h3 class="CDB-Widget-textBig" title="<%- title %>"><%- title %></h3>
     <div class="CDB-Widget-options CDB-Widget-contentSpaced">
-      <button class="CDB-Widget-buttonIcon CDB-Widget-buttonIcon--circle
+      <button class="CDB-Widget-buttonIcon CDB-Widget-buttonIcon--circle js-colors
         <%- isColorApplied ? 'is-selected' : '' %>
         <%- isColorApplied ? 'js-cancelColors' : 'js-applyColors' %>
+        " data-tooltip="
+          <%- isColorApplied ? 'Remove colors' : 'Apply colors' %>
         ">
         <i class="CDB-Icon CDB-Icon-syringe CDB-Icon--top"></i>
       </button>
-      <button class="CDB-Shape-threePoints js-collapse">
+      <button class="CDB-Shape-threePoints js-collapse" data-tooltip="<%- isCollapsed ? 'Show' : 'Hide' %>">
         <span class="CDB-Shape-threePointsItem"></span>
       </button>
     </div>

src/geo/ui/widgets/category/title/search_title_view.js

@@ -2,6 +2,7 @@ var _ = require('underscore');
 var cdb = require('cdb');
 var $ = require('jquery');
 var View = require('cdb/core/view');
+var TooltipView = require('cdb/geo/ui/widgets/widget-tooltip-view');
 var template = require('./search_title_template.tpl');
 
 /**
@@ -29,6 +30,7 @@ module.exports = View.extend({
   },
 
   render: function() {
+    this.clearSubViews();
     this.$el.html(
       template({
         isCollapsed: this.dataModel.isCollapsed(),
@@ -42,6 +44,7 @@ module.exports = View.extend({
         canShowApply: this.dataModel.canApplyLocked()
       })
     );
+    this._initViews();
     return this;
   },
 
@@ -52,6 +55,20 @@ module.exports = View.extend({
     this.add_related_model(this.viewModel);
   },
 
+  _initViews: function() {
+    var collapseTooltip = new TooltipView({
+      target: this.$('.js-collapse')
+    });
+    $('body').append(collapseTooltip.render().el);
+    this.addView(collapseTooltip);
+
+    var colorsTooltip = new TooltipView({
+      target: this.$('.js-colors')
+    });
+    $('body').append(colorsTooltip.render().el);
+    this.addView(colorsTooltip);
+  },
+
   _onSearchToggled: function() {
     var isSearchEnabled = this.viewModel.isSearchEnabled();
     this[isSearchEnabled ? '_bindESC' : '_unbindESC']();

src/geo/ui/widgets/formula/content_view.js

@@ -2,9 +2,11 @@ var _ = require('underscore');
 var WidgetContent = require('../standard/widget_content_view');
 var WidgetViewModel = require('../widget_content_model');
 var template = require('./template.tpl');
+var TooltipView = require('cdb/geo/ui/widgets/widget-tooltip-view');
 var animationTemplate = require('./animation_template.tpl');
 var formatter = require('cdb/core/format');
 var d3 = require('d3');
+var $ = require('jquery');
 var AnimateValues = require('../animate_values.js');
 
 /**
@@ -61,6 +63,8 @@ module.exports = WidgetContent.extend({
 
     this.$el.toggleClass('is-collapsed', !!isCollapsed);
 
+    this._initViews();
+
     return this;
   },
 
@@ -69,6 +73,14 @@ module.exports = WidgetContent.extend({
     WidgetContent.prototype._initBinds.call(this);
   },
 
+  _initViews: function() {
+    var tooltip = new TooltipView({
+      target: this.$('.js-collapse')
+    });
+    $('body').append(tooltip.render().el);
+    this.addView(tooltip);
+  },
+
   _toggleCollapse: function() {
     this.dataModel.toggleCollapsed();
   }

src/geo/ui/widgets/formula/template.tpl

@@ -6,7 +6,7 @@
         <span class="CDB-Widget-textSmaller CDB-Widget-textSmaller--upper"><%- operation %></span>
       </div>
     </div>
-    <button class="CDB-Shape-threePoints js-collapse">
+    <button class="CDB-Shape-threePoints js-collapse" data-tooltip="<%- isCollapsed ? 'Show' : 'Hide' %>">
       <span class="CDB-Shape-threePointsItem"></span>
     </button>
   </div>

src/geo/ui/widgets/histogram/content.tpl

@@ -12,7 +12,7 @@
   </dl>
 </div>
 <div class="CDB-Widget-content js-content">
-  <div class="CDB-Widget-chartTooltip js-tooltip"></div>
+  <div class="CDB-Widget-tooltip js-tooltip"></div>
   <div class="CDB-Widget-filter CDB-Widget-contentSpaced js-filter is-hidden">
     <p class="CDB-Widget-textSmaller CDB-Widget-textSmaller--bold CDB-Widget-textSmaller--upper js-val"></p>
     <div class="CDB-Widget-filterButtons">

src/geo/ui/widgets/histogram/histogram_title_template.tpl

@@ -1,12 +1,12 @@
 <h3 class="CDB-Widget-textBig" title="<%- title %>"><%- title %></h3>
 <div class="CDB-Widget-options CDB-Widget-contentSpaced">
-  <button class="CDB-Widget-buttonIcon CDB-Widget-buttonIcon--circle
+  <button class="CDB-Widget-buttonIcon CDB-Widget-buttonIcon--circle js-sizes
     <%- isSizesApplied ? 'is-selected' : '' %>
     <%- isSizesApplied ? 'js-cancelSizes' : 'js-applySizes' %>
-    ">
+    " data-tooltip="<%- isSizesApplied ? 'Remove sizes' : 'Apply sizes' %>">
     <i class="CDB-Icon CDB-Icon-syringe CDB-Icon--top"></i>
   </button>
-  <button class="CDB-Shape-threePoints js-collapse">
+  <button class="CDB-Shape-threePoints js-collapse" data-tooltip="<%- isCollapsed ? 'Show' : 'Hide' %>">
     <span class="CDB-Shape-threePointsItem"></span>
   </button>
 </div>

src/geo/ui/widgets/histogram/histogram_title_view.js

@@ -2,6 +2,7 @@ var _ = require('underscore');
 var cdb = require('cdb');
 var $ = require('jquery');
 var View = require('cdb/core/view');
+var TooltipView = require('cdb/geo/ui/widgets/widget-tooltip-view');
 var template = require('./histogram_title_template.tpl');
 
 /**
@@ -32,6 +33,8 @@ module.exports = View.extend({
         isCollapsed: this.dataModel.isCollapsed()
       })
     );
+    this._initViews();
+
     return this;
   },
 
@@ -40,6 +43,20 @@ module.exports = View.extend({
     this.add_related_model(this.dataModel);
   },
 
+  _initViews: function() {
+    var sizesTooltip = new TooltipView({
+      target: this.$('.js-sizes')
+    });
+    $('body').append(sizesTooltip.render().el);
+    this.addView(sizesTooltip);
+
+    var collapseTooltip = new TooltipView({
+      target: this.$('.js-collapse')
+    });
+    $('body').append(collapseTooltip.render().el);
+    this.addView(collapseTooltip);
+  },
+
   _applySizes: function() {
     this.dataModel.set('histogramSizes', true);
   },

src/geo/ui/widgets/widget-tooltip-view.js

@@ -0,0 +1,60 @@
+var View = require('cdb/core/view');
+var _ = require('underscore');
+
+/**
+ * Standard widget tooltip view
+ *
+ */
+module.exports = View.extend({
+
+  className: 'CDB-Widget-tooltip',
+
+  options: {
+    attribute: 'data-tooltip',
+    offsetX: 10,
+    offsetY: -28
+  },
+
+  initialize: function(opts) {
+    if (!opts.target) {
+      throw new Error('target is not defined');
+    }
+    this._$target = this.options.target;
+    this._initBinds();
+  },
+
+  render: function() {
+    var value = this._$target.attr(this.options.attribute);
+    this.$el.html(value);
+    return this;
+  },
+
+  _initBinds: function() {
+    this._$target.hover(
+      _.bind(this.show, this),
+      _.bind(this.hide, this)
+    );
+  },
+
+  _setPosition: function() {
+    var pos = this._$target.offset();
+    var width = this.$el.outerWidth();
+
+    this.$el.css({
+      top: pos.top + this.options.offsetY,
+      left: pos.left - (width/2) + this.options.offsetX
+    });
+  },
+
+  show: function() {
+    this.render();
+    this._setPosition();
+    View.prototype.show.call(this);
+  },
+
+  clean: function() {
+    this._$target.off('mouseenter mouseleave');
+    View.prototype.clean.call(this);
+  }
+
+});

themes/scss/common/shapes.scss

@@ -15,9 +15,9 @@
   position: relative;
   width: 3px;
   height: 16px;
-  margin-right: -10px;
+  margin-right: -7px;
   margin-left: 6px;
-  padding: 0 10px;
+  padding: 0 7px 0 10px;
   text-align: center;
   vertical-align: middle;
 
@@ -51,7 +51,7 @@
   display: block;
   position: absolute;
   top: 6px;
-  left: 10px;
+  left: 7px;
   width: 3px;
   height: 3px;
   border-radius: 50%;

themes/scss/widgets/chart.scss

@@ -25,35 +25,6 @@
   height: 60px;
 }
 
-.CDB-Widget-chartTooltip {
-  @include css3-prefix(user-select, none);
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 50px;
-  padding: 5px;
-  box-sizing: border-box;
-  border-radius: 3px;
-  background: #000;
-  color: #FFF;
-  font-size: 10px;
-  text-align: center;
-  pointer-events: none;
-}
-
-.CDB-Widget-chartTooltip:after {
-  display: inline-block;
-  position: absolute;
-  bottom: -3px;
-  left: 50%;
-  margin-left: -7px;
-  border-top: 5px solid #000;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  content: '';
-}
-
 .CDB-Chart.is-selectable .CDB-Chart-handle,
 .CDB-Chart.is-selectable .CDB-Chart-handleLine {
   opacity: 1;

themes/scss/widgets/tooltip.scss

@@ -0,0 +1,36 @@
+// Tooltip styles
+// ----------------------------------------------
+
+@import '../variables/mixins';
+
+.CDB-Widget-tooltip {
+  @include css3-prefix(user-select, none);
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 50px;
+  max-width: 120px;
+  padding: 5px;
+  box-sizing: border-box;
+  border-radius: 3px;
+  background: #000;
+  color: #FFF;
+  font-family: 'Open Sans';
+  font-size: 10px;
+  text-align: center;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.CDB-Widget-tooltip:after {
+  display: inline-block;
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  margin-left: -7px;
+  border-top: 5px solid #000;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  content: '';
+}