1

In my project, I use a bootstrap popover to show a table which populates through knockout observableArray. My problem is, it shows popover correctly to 'hover' but not to the 'focus'

This is my anchor link which triggers the popover.

<a style="cursor: pointer; font-weight: 100" data-bind="event: { mousedown: TndTrainingRegisterAdmin.ShowSchedule } , attr: { id: 'schedule' + appId()}" data-toggle="popover" data-trigger="focus" data-placement="right" data-html="true"> View Schedule </a>

I tried removing data-trigger="focus" and adding only one side of the code. it also didn't work out. So it's not due to code repetitions. This is the knockout model's side code.

var ctrlId = '#schedule' + rs.appId();

$(ctrlId).popover(
     {
         template: '<div class="popover" role="tooltip" style="width: 100%; max-width:600px"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>',
         html: true,
         content: function () {
               return $('#divViewSchedule').html();
              }
         });

This is div code which contains the table.

<div id="divViewSchedule" class="hide">             
    @Html.Partial("~/Views/TrainingRegistration/_CourseSchedule.cshtml")
</div>

This popover works fine when I use data-trigger='hover' or trigger: 'hover' But I want it to work as 'focus' behavior. I tried adding data-trigger='focus' and trigger: 'focus' none of these working neither showing any errors in console. Can Anyone help me, please? :)

Menuka Ishan
  • 5,164
  • 3
  • 50
  • 66
  • Did you try to subscribe to the `focus` event of the element, and when it's fired manually show the popover? `$(ctrlId).popover("show");` https://getbootstrap.com/docs/3.3/javascript/#popovers – Schadensbegrenzer Feb 16 '18 at 06:58
  • I tried it. Now popover stays on the page until page is refreshed :/ – Menuka Ishan Feb 16 '18 at 07:38
  • `onblur` hide.., or instead of "hide" just use toggle `$(ctrlId).popover("toggle")` – Schadensbegrenzer Feb 16 '18 at 07:53
  • I tried 'toggle' but it's not the required behavior. What I want is 'focus' behavior. Click on link popover appears and then click again on another place it disappears – Menuka Ishan Feb 16 '18 at 08:18

0 Answers0