I'm hoping someone might be able to help me with this issue that I've been struggling with for hours. I’m developing a .NET Core application using Visual Studio. I’m trying to use the Bootstrap Tool Tips which leverages Popper. When I get the Tooltips to work, I can’t load Modals, when I get Modals to work, I can’t get Tooltips to work.
Tooltips works when I install Bootstrap (4.6.0) via Nuget. When I try to load a modal, I get the following error:
TypeError: $('#journalEntryModal').modal is not a function. (In '$('#journalEntryModal').modal('show')', '$('#journalEntryModal').modal' is undefined)
In order for the Modal functionality to work, I have to do the following:
- Remove the Bootstrap as a Nuget Package
- Manually download Bootstrap 4.6.0 and include it in my solution
- Download Popper.js 2.9.0 and include it in my solution
When that happens and I hover over an element that has a tooltip, I get the following error:
TypeError: Object is not a constructor (evaluating 'new Popper__default['default'](this.element, tip, this._getPopperConfig(attachment))')
Note that I'm using JQuery 3.5.1. When I use Bootstrap via the Nuget install, I don't include the BOOTSTRAP & POPPER section.
@* ============== JQUERY ================== *@
<script type="text/javascript" src="~/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="~/lib/jquery.inputmask/jquery.inputmask.js"></script>
<script type="text/javascript" src="~/lib/jquery.inputmask/bindings/inputmask.binding.js"></script>
<script type="text/javascript" src="~/lib/jquery-validate/jquery.validate.js"></script>
<script type="text/javascript" src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="~/lib/jquery-toast-plugin/jquery.toast.js"></script>
<script type="text/javascript" src="~/lib/jquery-tokeninput/js/jquery.tokeninput.js"></script>
<script type="text/javascript" src="~/lib/bootstrap-chosen/chosen.jquery.js"></script>
@* ============== BOOTSTRAP & POPPER ================== *@
<script type="text/javascript" src="~/lib/popper.js/umd/popper.js"></script>
<script type="text/javascript" src="~/lib/bootstrap-4.6.0/js/bootstrap.js"></script>
Any ideas on what I could be doing wrong?
Thanks a bunch.
--- Val
