CODEWITHSUNDEEP
javascriptjquerybootstrap-4popover
ridgedale
ridgedale

Reputation: 190

JQuery & Bootstrap 4 Popover Conflict?

I was wondering if there may be a conflict between JQuery's and Boostrap 4's popover. When try to add a popover and load the page nothing is displayed when I click on the button element. See code example below:

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />

<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

        <div class="fc-right">
            <div class="btn-group">
                <button class="btn btn-primary" title="My Popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="My popover content">?</button>
            </div>
        </div>

Adding the following noConflict code above the popover script does not appear to work either:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

Any assistant would be appreciated.

Upvotes: 1

Views: 1733

Answers (1)

ridgedale
ridgedale

Reputation: 190

With the assistance of Smit I managed to resolve the issue by simplifying and using the following fiddle:

https://jsfiddle.net/ridgedale/xpbynn9w/#&togetherjs=80xVyj4TRc

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css
' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/en-gb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</head>
<body>
    <div id='cal-filters' class="fc-toolbar fc-header-toolbar">
        <div class="fc-left">
            <div class="btn-group">
                <button class="btn btn-primary asl-events">Btn1</button>
                <button type="button" class="btn btn-primary hnu-events">Btn2</button>
                <button type="button" class="btn btn-primary hps-events">Btn3</button>
            </div>
        </div>
        <div class="fc-right">
            <div class="btn-group">
                <button class="btn btn-primary" id="btnPopover" 
                    title="Help List"
                    data-content="Help information"
                    data-trigger="click"
                    data-toggle="popover">Help</button>
            </div>
        </div>
        <div class="fc-clear"></div>
    <hr />
    </div>
    
</body>

</html>

Upvotes: 1

Related Questions