Bootstrap Popover on Mouseover VERTICAL

Example of Triggering Bootstrap Popover on Mouseover

by matthewdbill

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<table style="width:500px; border:solid 1px;">
  <tr>
    <td class="bob" data-toggle="popover" title="Popover title">1.2</td>
    <td>My Session</td>
  </tr>
  <tr>
    <td class="bob">3.6</td>
    <td>Session 2</td>
  </tr>
</table>

<div id="container" style="width: 400px; height: 200px; margin: 0 auto; display:none"></div>

CSS

.bs-example {
	  margin: 150px 50px;
	}

JavaScript

$(document).ready(function() {
  $('.bob').popover({
    placement: 'right',
    trigger: 'hover',
    width: '500px',
    container: 'body',
    html: true,
    content: 'getGraphContent'
  });
  
  $('#myPopover').on('hidden.bs.popover', function () {
  
	})
  
});

function getGraphContent() {
  var chart = createChart();
  chart.reflow();
  return $('#container').html();
}

function createChart() {

  var chart = Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: ['Maximum time difference in form interactions', 'Total clicks', 'Number of orientation changes over distance', 'Number of window resizes', 'Average acceleration Y'],
      labels: {
        style: {
          textOverflow: 'none'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        enabled: false
      },
      labels: {
        enabled: false
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    series: [{
      data: [2.2, 0.8, 0.5, 0.3, 0.2]
    }]
  });
  
  console.log(chart);
  
  return chart;

}