Q:

.data('bs.popover') returns undefined

I'm migrating application from angular.js to Angular 5..
Application is using bootstrap theme, which uses bootstrap v3.3.7. I copied every css and script and the weird thing is that popover (user drop-down) not working in new application any more.
I'm trying to debug it and found that the problem is $('[data-toggle="popover"]').data("bs.popover") is undefined.
$(document).on("click", '[data-toggle="popover"]', function (o) {
        o.stopPropagation(),
            $('[data-toggle="popover"]')
                .data("bs.popover")
                .tip()
                .hasClass("in") ? (
                    $('[data-toggle="popover"]').popover("hide"),
                    $(document).off("click.app.popover")
                ) : (
                    $('[data-toggle="popover"]').popover("show"),
                    setTimeout(function () {
                        $(document).one("click.app.popover", function () {
                            $('[data-toggle="popover"]').popover("hide")
                        })
                    }, 1)
                )
    })

And my html:
<ul class="nav navbar-nav">
    ...
    <li>
        <button data-toggle="popover" data-original-title="" title="">
            <img class="img" src="assets/images/img-1.jpg">
        </button>
    </li>
</ul>

When button[data-toggle="popover"] is clicked, html below should be shown:
<ul class="nav navbar-nav hidden">
    <li>
        <a href="#/profile">
            <span class="profile-link"></span> Profile
        </a>
    </li>
    ...
</ul>

Any ideas?

A:

it's undefined because you don't have bs.popover as a data attribute in your html and it's trying to read the data-bs.popover that doesn't exist
if you have <div data-foo="bar"></div> then $('div').data('foo') will output bar
https://api.jquery.com/data/

The .data() method allows us to attach data of any type to DOM
  elements in a way that is safe from circular references and therefore
  from memory leaks.

to display the ul inside the popover you need to put it in the data-content attribute and add data-html="true" to let the popover know it's displaying html , 
i don't know what are you trying to do with all that .data() .tip() .hasClass() ...etc when you could've just replace it with $().popover() , here's a working popover : 

$('[data-toggle="popover"]').popover();


/*

// this will work too

$(document).on("click", '[data-toggle="popover"]', function (o) {
 o.stopPropagation(),
    $('[data-toggle="popover"]')
     .hasClass("in") ? (
         $('[data-toggle="popover"]').popover("hide"),
             $(document).off("click.app.popover")
            ) : (
             $('[data-toggle="popover"]').popover("show"),
                 setTimeout(function () {
                     $(document).one("click.app.popover", function () {
                         $('[data-toggle="popover"]').popover("hide")
                        })
                    }, 1)
                )
})
*/
button{
  border: none;
  background: none;
  margin-top: 10px;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
  <li>
    <button 
      data-toggle="popover" 
      data-original-title="" 
      title=""
      data-html="true"
      data-content='<ul class="nav navbar-nav"><li><a href="#/profile"><span class="profile-link"></span> Profile</a></li></ul>'>
      <img class="img" src="https://loremflickr.com/100/100">
    </button>
  </li>
</ul>

