Popover placed in navbar not showing completely

i have placed a popover in navbar it is working but hidden behind the ion content.
you can see this over here. http://puu.sh/oLmyg/c2959b4c4b.png

  ngOnInit(){
    $('#notifications').popover({
      placement: 'bottom',
      toggle: 'popover',
      html: true,
      content: '<div class=""><a href="google.com">Message one, From someone.</a></div>'+
      '<div class=""><a href="google.com">Message one, From someone.</a></div>'
    });
  }`

This is probably a z-index issue.

No not at all, i have tried it many times. the z index of popover is 1060