feat(ticksTooltip): Add a ticksTooltip option

This feature is similar to the previous ticksValuesTooltip options but for ticks.

Closes #209

Author: Valentin Hervieu

README.md

@@ -232,7 +232,9 @@ $scope.slider = {
 
 **showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and  the step value for each step of the slider.
 
-**ticksValuesTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick value is hovered. Set to a function that returns the tooltip content for a given value.
+**ticksTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value.
+
+**ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values.
 
 **scale** - _Number (defaults to 1)_: If you display the slider in an element that uses `transform: scale(0.5)`, set the `scale` value to 2 so that the slider is rendered properly and the events are handled correctly.
 

demo/demo.js

@@ -104,6 +104,19 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks and tooltip
+  $scope.slider_ticks_tooltip = {
+    value: 5,
+    options: {
+      ceil: 10,
+      floor: 0,
+      showTicks: true,
+      ticksTooltip: function(v) {
+        return 'Tooltip for ' + v;
+      }
+    }
+  };
+
   //Slider with ticks and values
   $scope.slider_ticks_values = {
     value: 5,

demo/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>AngularJS Touch Slider</title>
   <!-- Latest compiled and minified CSS -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+  <link rel="stylesheet" href="./lib/bootstrap.min.css">
   <link rel="stylesheet" href="../dist/rzslider.css"/>
   <link rel="stylesheet" href="demo.css"/>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
@@ -97,6 +97,14 @@ <h2>Slider with ticks</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with ticks and tooltips</h2>
+    <rzslider
+      rz-slider-model="slider_ticks_tooltip.value"
+      rz-slider-options="slider_ticks_tooltip.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with ticks and values (and tooltips)</h2>
     <rzslider
@@ -243,7 +251,7 @@ <h2>Slider with all options demo</h2>
 
 </body>
 <script src="../node_modules/angular/angular.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
+<script src="./lib/ui-bootstrap-tpls.js"></script>
 <script src="../dist/rzslider.js"></script>
 <script src="demo.js"></script>
 </html>