https://stackoverflow.com/questions/44575172/popup-in-knockout-js-relative-to-dom-element

by jlspake

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach : list">
  <div class="col-lg-3 col-md-4 col-xs-6 thumb" >
     <a class="thumbnail ind" href="#">
      <img type="button" class="img-responsive" data-lightbox="" src="http://placehold.it/200x150" alt="" data-toggle="popover" data-bind="popover: $data, popoverTitle: 'Title'" >
      </a>
  </div>

JavaScript

function viewModel(){
  var self = this;
  
  this.list = ko.observableArray([
    'Content 1', 'Content 2', 'Content 3'
  ]);
}

ko.bindingHandlers.popover = {

 init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
 {
    //ko.bindingHandlers.value.init(element, valueAccessor, allBindings);
    var source = allBindings.get('popoverTitle');
    var sourceUnwrapped = ko.unwrap(source);
    $(element).attr('data-placement', 'bottom');
    $(element).popover({
      trigger: 'hover',
      content: valueAccessor(),
      title: sourceUnwrapped
    });
    //$(element).popover('show');
  },
  //update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    //var value = valueAccessor();
    //ko.bindingHandlers.value.update(element, valueAccessor);
  //}
};

ko.applyBindings(new viewModel());