1

I am trying to make a popup using the knockout js. But I am not able to get a popup relative to my dom element. I know that there are two solutions 1) $index to set to specific id. 2) You can also get the currently dom element via knockout too and don't use $index.

But I am unable to use the any of the above solutions. Anybody has a solution how can I have a popup like the image below for every foreach and relative to the current image.

Popup Template

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: 'focus',
      content: valueAccessor(),
      title: sourceUnwrapped
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    ko.bindingHandlers.value.update(element, valueAccessor);
  }
};
<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/400x300" alt="" data-toggle="popover" data-bind="popover:" >
      </a>
  </div>
Rishabh Sharma
  • 33
  • 10
  • What is `$(element).popover(...)`? Popover isn't a built-in function in knockout or jquery so what library are you using? – Jason Spake Jun 15 '17 at 19:19

1 Answers1

0

Assuming you're using the Bootstrap version of popover:

I think the problem is with your focus based trigger. Image elements aren't focus-able by default. As for the position of the popover, it should already by relative to the element it's attached to so you shouldn't need to do anything fancy.

After changing the trigger type it seems to work as I would expect.

$(element).popover({
  trigger: 'hover',
  content: valueAccessor(),
  title: sourceUnwrapped
});

https://jsfiddle.net/3s2h7gz3/

If you'd prefer to make the image element focusable you can give it a tabindex.

<img tabindex="0" type="button" ...
Jason Spake
  • 4,293
  • 2
  • 14
  • 22
  • Hey i want to ask one last question , How can I add in the pop over content – Rishabh Sharma Jun 16 '17 at 17:14
  • @RishabhSharma You can use the data-content and data-html tags to tell bootstrap to render the content as html. See: https://stackoverflow.com/questions/13202762/html-inside-twitter-bootstrap-popover – Jason Spake Jun 16 '17 at 17:35
  • @RishabhSharma You probably won't be able to get boostrap to understand knockout observables though so any bindings won't work. It will have to be static html. – Jason Spake Jun 16 '17 at 17:37
  • @RishabhSharma Glad to hear it helped. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in. – Jason Spake Jun 16 '17 at 18:04