Trying to produce a pop up when the chart is click

Question

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 that is selected to produce a small pop up above the bar like this

when the close is selected it should highlight the bar and return all bars to normal state.

Here's my code

javascript

$(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);
} else {
    $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
}
});

css

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

html

<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>

Answer 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>