title: Position tooltip based on mouse position
body: <p>I'm using a stacked bar chart with a default range on the y -axis from 0 - 24. Each stacked bar consists of 6 bars (that go from 0 to 4). If the total size of the stacked bar is small, the user can not read the tooltip because it is always displayed below the mouse pointer.</p>
  
  <p>Is there a way to indicate where tooltip should be displayed (e.g. below the mouse if the upper part of the chart is hovered, above if the lower part of the chart is hovered?</p>
  
  <p>The options that I'm currently using are:</p>
  
  <pre><code>$scope.options={
          scales: {
              xAxes: [{
                          stacked: true,
                          type: "time",
                          format: "YYYY-MM-DD",
                          time: {
                              displayFormats: {
                                  'millisecond': 'M-D', // Sep 4 2015
                                  'second': 'M-D', // Sep 4 2015
                                  'minute': 'M-D', // Sep 4 2015
                                  'hour': 'M-D', // Sep 4 2015
                                  'day': 'M-D', // Sep 4 2015
                                  'week': 'M-D', // Sep 4 2015
                                  'month': 'M-D', // Sep 4 2015
                                  'quarter': 'M-D', // Sep 4 2015
                                  'year': 'M-D', // Sep 4 2015
                              },
                              tooltipFormat: 'M-D'
                          }
                  }],
                  yAxes: [{
                          stacked: true,
                          ticks:{
                              min: 0,
                              max: 24
                          }
                  }]
          },
              colors: ["rgba(192,216,0,1.0)","rgba(148,64,237,1.0)","rgba(77,167,77,1.0)",
                       "rgba(203,75,75,1.0)","rgba(255,206,123,1.0)","rgba(0,168,240,1.0)"]
      }
  </code></pre>
  
  <p>I've created a <a href="https://jsfiddle.net/gadeynebram/53q4ddaq/" rel="nofollow">fiddle</a> to explain the problem.</p>