bootstrap popover in asp.net webform - asp.net

Question

i would like to try bootstrap pop over using asp.net
ive already tried and search for the ways to do this
function pageLoad(sender, args) {
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
};
but still there's no clear sign for popover.
and in my debugger i see errors like $ is not defined and .popover is not a function
another problem is most of the tutorial is in MVC
can someone give me advise or better explanation to do this.
Thanks in advance and keep going!
here is my current work:
css:
<asp:Content ID="Content2" ContentPlaceHolderID="css" runat="server">
<link href="Content/bootstrap.css" rel="stylesheet" />
</asp:Content>
html:
<asp:Content ID="Content3" ContentPlaceHolderID="body" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="row">
<div class="col-md-2 col-lg-2">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" data-toggle="popover" data-placement='bottom' title="sample" ID="lblConditionMasterPart" CssClass="form-control popover PopoverConditionMasterPart" Text="click me" Style="cursor: pointer;"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel9" runat="server">
<ContentTemplate>
<div id="PopoverConditionMasterPart" style="display: none;">
<button type= "button" title="bnt1" class="form-control btn btn-secondary"> btn1</button>
<button type= "button" title="bnt1" class="form-control btn btn-primary"> btn2</button>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Content>
script:
<asp:Content ID="Content4" ContentPlaceHolderID="script" runat="server">
<script src="Scripts/jquery-3.2.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
function pageLoad(sender, args) {
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
};
</script>
</asp:Content>

Answer 1

It appears you are defining a pageLoad function but never calling it. You could call it in ready, but why not just do what the function does on page load:
<script type="text/javascript">
$(document).ready(
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
});
</script>