Trying To Produce A Pop Up When The Chart Is Clicked. The Pop Up Is A Close Button

I'm trying to produce a pop up in highcharts when the user clicks on a bar. So far I have the code that when a user clicks on a bar it fades all the other bars. I want the bar tha

Solution 1:

$(function() {
  $('#container4').highcharts({
    chart: {
      type: 'column',
      events: {
        click: function(e) {
          console.log(e);
        },
        selection: function(e) {
          console.log(e);
        }
      }
    },
    title: {
      text: ''
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xAxis: {
      gridLineColor: '',
      labels: {
        enabled: false
      }
    },
    yAxis: {
      title: {
        text: 'Fruit'
      },
      visible: false
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      /*series: {
      allowPointSelect: true,
      states: {
      select: {
      color: 'blue',
      }
      }
      },*/
      column: {
        stacking: 'normal',
      }
    },
    series: [{
      name: '',
      data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
      threshold: 0,
      color: '#E0E0E0 ',
      enableMouseTracking: false,
    }, {
      name: '',
      data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
      threshold: 0,
      color: 'green',
      negativeColor: 'red',
    }, ]
  });
});

$(document).on('click', '.highcharts-tracker rect', function() {
  var elm = $(this);
  if (!elm.attr('class')) {
    $('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);
    elm.attr('class', 'active').css('opacity', 1);

    $('#pointer').show().
    offset({
      top: elm.offset().top - 30,
      left: elm.offset().left + 10
    })

  }
});

$('#pointer').click(function() {
  $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
  $(this).hide()
})

.highcharts-series rect {
  transition: all .3s ease;
}

#pointer {
  height: 30ph;
  width: 10px;
  display: noone;
  background-color: blue;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>
<div id="pointer">x</div>