Bootstrap popover plugin + pops/does not pop

See more:

ASP.NET

WebForms

bootstrap

Hi everyone,

Environment:
ASP.NET {WebfForms}
VS: 2013

I come to you for aid regarding Bootstrap Popover; we implemented this functionality in one of our pages [Master -> Content Page -> UserControl] in the following manner:
In the Content Page:

<script type="text/javascript">

    function pageLoad() {
        if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            $(document).ready(function () {
                $('.popper').popover({
                    container: 'body',
                    placement: 'auto',
                    html: true,
                    title: 'Observaciones',
                    content: function () {
                        return $(this).children(':first').html();
                    }
                });
            });
        };
    }

</script>

The popper class was assigned as follows (in the UserControl):

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObs" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

This scenario works just fine; every row withing our GridView behaves as expected. However, on another page {Master -> ChildMaster -> Content Page -> UserControl} it simply does not work at all.

There are only two mayor differences:
a) The Child Master Page, which only handles look & feel for a certain group of pages
b) A second instance of the UserControl in such content page; which obviously has its very own name, etc.

The script was implemented at Content Page level, just like before; and the class in the secondary user control like this:

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObsAlt" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

All script references are located in the Master Page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

What I have tried:

Looking at Firefox's developer tools, I identified a "minor" difference in the way these controls are rendered, but ignore why or if it has something to do with the issue:

Working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" data-original-title="" title=""></div>

NON-working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover">
</div>

This is my first time using this plugin, and really do not know what's going on.

Guidance is much appreciated. Thanks in advance.