Add mouseover descriptions to each chart type. Closes elastic#2541

src/kibana/components/visualize/visualize.less

@@ -39,6 +39,9 @@ visualize {
 
 }
 
+ul.visualizations .media-body {
+  font-size: 0.75em;
+}
 
 visualize-spy {
   // this element should flex

src/kibana/plugins/metric_vis/metric_vis.js

@@ -14,6 +14,8 @@ define(function (require) {
     return new TemplateVisType({
       name: 'metric',
       title: 'Metric',
+      description: 'One big number for all of your one big number needs. Perfect for show ' +
+        'a count of hits, or the exact average a numeric field',
       icon: 'fa-calculator',
       template: require('text!plugins/metric_vis/metric_vis.html'),
       params: {

src/kibana/plugins/table_vis/table_vis.js

@@ -26,6 +26,8 @@ define(function (require) {
       name: 'table',
       title: 'Data table',
       icon: 'fa-table',
+      description: 'The data table provides a detailed breakdown, in tabular format, of the results of a composed ' +
+        'aggregation. Tip, a data table is available from many other charts by clicking grey bar at the bottom of the chart',
       template: require('text!plugins/table_vis/table_vis.html'),
       params: {
         defaults: {

src/kibana/plugins/vis_types/_vis_type.js

@@ -10,6 +10,7 @@ define(function (require) {
       this.responseConverter = opts.responseConverter;
       this.hierarchicalData = opts.hierarchicalData || false;
       this.icon = opts.icon;
+      this.description = opts.description;
       this.schemas = opts.schemas || new VisTypeSchemas();
       this.params = opts.params || {};
     }

src/kibana/plugins/vis_types/vislib/area.js

@@ -7,6 +7,10 @@ define(function (require) {
       name: 'area',
       title: 'Area chart',
       icon: 'fa-area-chart',
+      description: 'Great for stacked timelines in which the total of all series is more important ' +
+        'than comparing any two or more series. Less useful for assessing the relative change of ' +
+        'unrelated data points as changes in a series lower down the stack will have a difficult to gauge ' +
+        'effect on the series above it.',
       params: {
         defaults: {
           shareYAxis: true,

src/kibana/plugins/vis_types/vislib/histogram.js

@@ -7,6 +7,8 @@ define(function (require) {
       name: 'histogram',
       title: 'Vertical bar chart',
       icon: 'fa-bar-chart',
+      description: 'The goto chart for oh-so-many needs. Great for time and non-time data. Stacked or grouped, ' +
+      'exact numbers or percentages. If you are not sure which chart your need, you could do worse than to start here',
       params: {
         defaults: {
           shareYAxis: true,

src/kibana/plugins/vis_types/vislib/line.js

@@ -7,6 +7,8 @@ define(function (require) {
       name: 'line',
       title: 'Line chart',
       icon: 'fa-line-chart',
+      description: 'Often the best chart for high density time series. Great for comparing one series to another. ' +
+        'Be careful with sparse sets as the connection between points can be misleading',
       params: {
         defaults: {
           shareYAxis: true,

src/kibana/plugins/vis_types/vislib/pie.js

@@ -7,6 +7,8 @@ define(function (require) {
       name: 'pie',
       title: 'Pie chart',
       icon: 'fa-pie-chart',
+      description: 'Pie charts are ideal for displaying the parts of some whole. For example, sales percentages by department.' +
+       'Pro Tip: Pie charts are best used sparingly, and with no more than 7 slices per pie',
       params: {
         defaults: {
           shareYAxis: true,

src/kibana/plugins/vis_types/vislib/tile_map.js

@@ -8,6 +8,8 @@ define(function (require) {
       name: 'tile_map',
       title: 'Tile map',
       icon: 'fa-map-marker',
+      description: 'Your source for geographic maps. Requires an elasticsearch geo_point field. More specifically, a field ' +
+       'that is mapped as type:geo_point with latitude and longitude coordinates.',
       params: {
         defaults: {
           mapType: 'Shaded Circle Markers',

src/kibana/plugins/visualize/wizard/step_1.html

@@ -7,9 +7,25 @@ <h1>
 <ul class="visualizations list-group list-group-menu">
   <a class="visualization list-group-item list-group-menu-item"
      ng-repeat="type in visTypes.inTitleOrder"
-     ng-href="{{ visTypeUrl(type) }}">
+     ng-href="{{ visTypeUrl(type) }}"
+     ng-mouseenter="showDescription=true" ng-mouseleave="showDescription=false">
     <li>
-      <i class="fa" ng-class="type.icon"></i>{{type.title}}
+      <!--
+      <div>
+        <i class="fa" ng-class="type.icon"></i>
+      </div>
+      <div>
+        {{type.title}}<br>
+        <small class="text-small">{{type.description}}</small>
+      </div>
+      -->
+      <div class="media">
+          <i class="media-left fa" ng-class="type.icon"></i>
+        <div class="media-body">
+          <h4 class="media-heading">{{type.title}}</h4>
+          <span ng-show="showDescription">{{type.description}}</span>
+        </div>
+      </div>
     </li>
   </a>
 </ul>