bootstrap popover not working in ServiceNow widget

Question

I'm working in ServiceNow's Istanbul version and am running into some issues incorporating the bootstrap popover into one of my widgets. The widget currently has fullCalendar dependency and renders a calendar with important dates. I wanted to incorporate a popover that a user can click on to get more information, however it doesn't seem to work correctly. I've initialized the popover with the following jquery:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 

    $('.popover-dismiss').popover({
        trigger: 'focus'
        })
});
</script>  

My HTML looks like this:

<span  class="list-group-item" ng-repeat="item in c.dates | orderBy:'date' track by $index" ng-if="item.displayList=='true' && item.futureDate">
        <li class="rowflex" style="list-style: none;">
          <div class="colflex">              
                <strong><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{item.date}}</strong>
            <p>{{item.date_name}}</p>
          </div>
          <a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="right" data-trigger="focus" title="test" data-content="test"/>  
        </li>
      </span>

Currently when i hover over the question mark glyphicons I can see "test", but when I click on it, nothing happens.

When I look in the console, I get this error message, but I'm unfamiliar with how to fix it:

Any suggestions?

Thanks!

Answer 1

After many attempts to make it work, I found the solution. You need to use Timeout.

Use one of the following options in your widget..

Option #1 - Client Script (Client Controller)

function ($scope, spUtil, $sce, $rootScope, $timeout) {
    $(document).ready(function(){
        setTimeout(function(){
            $('[data-toggle="popover"]').popover();
        },500);
    });
}

Option #2 - Link Function

function() {
    $(document).ready(function(){
        setTimeout(function(){
            $('[data-toggle="popover"]').popover();
        },500);
    });
}

Sample: Popover sample

Answer 2

In general with Service Portals, you want to avoid direct jQuery calls and instead use Angular. The error you're seeing is probably from that.

You'll want to look at BootstrapUI for Bootstrap + Angular to have a reference for some of the APIs you can use here, but may still be hit-or-miss.

Leverage the $uibModal service to open your modal.

A great resource I've used is https://serviceportal.io, in particular for your case https://serviceportal.io/modal-windows-service-portal/.

I've tested their example on our Istanbul instance and it worked. To summarize that post, here is what you may want to try for your case.

HTML Template

<span class="list-group-item" ng-repeat="item in c.dates | orderBy:'date' track by $index" ng-if="item.displayList=='true' && item.futureDate">
    <li class="rowflex" style="list-style: none;">
        <div class="colflex">              
            <strong><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{item.date}}</strong>
            <p>{{item.date_name}}</p>
        </div>
        <a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="right" data-trigger="focus" title="test" data-content="test" ng-click="c.openModal()" />  
    </li>
</span>

<script type="text/ng-template" id="modalTemplate">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Modal Window</h4>
        </div>
        <div class="panel-body wrapper-xl">
            Hello
        </div>
        <div class="panel-footer text-right">
            <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
        </div>
    </div>
</script>

Client Script

function($uibModal, $scope) {
    var c = this;

    c.openModal = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplate',
            scope: $scope
        });
    }

    c.closeModal = function() {
        c.modalInstance.close();
    } 
}