Search code examples
jqueryangularjstwitter-bootstrapservicenowbootstrap-popover

bootstrap popover not working in ServiceNow widget

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.

enter image description here

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

enter image description here

Any suggestions?

Thanks!

Solution

  • 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