How to hide webui-popover when not in focus (JQuery)

Question

I have a dynamically populated table and i've appended a webui-popover to each table row. For it to be visible, one has to click on an link item. I'm using the manual trigger to control its visibility.

My problem however is that when one popover is visible, i'm unable to hide it when i click outside the pop area. The documentation allows a dismissable to be set to true but this doesn't work either. Any help is appreciated.

 //Sample html
 <tr>
  <td>name</td>
    <td><a class="more" id="'.$id.'" data-fid="'.$fid.'" data-uplid="'.$uplid.'"  href="javascript:void(0);"><i class="material-icons">more_horiz</i></a></td>
   </tr>

Javascript for showing the dynamic popover

var more = document.getElementsByClassName('more');

for (var i = 0; i < more.length ; i++) {

    var fid, uplid;

    more[i].onclick = function(){

     fid = this.dataset.fid;
     uplid = this.dataset.uplid;

     //Popover
     $('#' + fid).webuiPopover({
      content: function(){
       var html = '<div id="pop-content">';
        html += '<a href="core/upload/'+fid+'/'+uplid+'" class="collection-item active">Edit</a>';
        html += '</div>';
        return html;
      },
      trigger: 'manual',
      dismissible: true,
      style: 'v2',
      placement: 'bottom-left',
      animation: 'pop',
      width: '180',
      cache: false
     });

    //Once the values have been passed, show the popover
    $('#' + fid).webuiPopover('show');
  }
}

I need to make it hide once the mouse is not in target, any ideas?

Answer 1

You must use:

trigger: 'click'

Besides, remove the 'onclick' event listener and the function encapsulating your popover content:

JSFIDDLE