'My boxes for Popover and Tooltips are showing far away from the buttons when they should show up next to it. Using Boostrap. Not sure why

Info is in the title and code is here: https://jsfiddle.net/cduyqxs1/

The popover box and tooltip should show up next to the buttons.

Anyone telling me I'm an idiot for not knowing, saying I shouldn't use Bootstrap or any other negative comments will be ignored as that seems to be the culture on here.

Thanks in advance.

HTML:

<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@700&display=swap" rel="stylesheet">

<title>Bootstrap</title>

    <!-- {05} - Modals, Popovers & Tooltips  -->

    <div class="lesson-container">

        <h2 id="mpt-header" class="lesson-header">Modals, Popovers & Tooltips</h2>

        <div class="lesson-box" id="mpt-box">

            <h4><span class="gold-text">Eg.1: </span>These are email <span class="blue-text">Modals</span>.</h4>
            <div class="mpt-examples">

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                    Email Tarek
                </button>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                    Email Kirsten
                </button>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                    Email Tommy
                </button>

                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

                    <div class="modal-dialog modal-dialog-centered" role="document">

                        <div class="modal-content">

                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <div class="modal-body">
                                ...
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        
                        </div>
                    
                    </div>
                
                </div>

            </div>

            <h4><span class="gold-text">Eg.2: </span>This is a <span class="blue-text">Popover</span>.</h4>
            <div id="popover-example" class="mpt-examples">

                <button id="myPopover" type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="bottom">Click to toggle popover</button>
                
            </div>

            <h4><span class="gold-text">Eg.3: </span>This a <span class="blue-text">Tooltip</span>.</h4>
            <div id="tooltip-example" class="mpt-examples tooltip-example">

                <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="myTooltip">Tooltip on bottom</button>

            </div>

        </div>

        <div class="break-line"></div>
        
        <div class="lesson-notes">

            <ul>
                <li><p>Modals are positioned over everything else in the document and remove scroll from the &lt;body&gt; so that modal content scrolls instead.</p></li>
                <li><p>Popovers are a common interface element shows a textbox displaying information when a user clicks on it. The same is with Tooltips, but you get information from Tooltips by hovering over them.</p></li>
            </ul>
            
        </div>
            
    </div>

</div>
      
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="bootstrap.js"></script>

CSS:

body
{
    padding: 0;
    margin: 0;
    position: relative;
}

#page-shell
{
    margin-top: 70px;
}

#no-border-1, #no-border-2, #no-border-3, #no-border-4, #no-border-5
{
    border: none !important;
}

.blue-text
{
    color: blue; 
}

.gold-text
{
    color: goldenrod;
    font-weight: bold;
}

.bold-text
{
    font-weight: bold;
}

.break-line
{
    width: 50%;
    height: 3px;
    background-color: gray;
    border-radius: 50%;
    opacity: 15%;
    margin: 35px 0px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#past-lessons
{
    border-bottom: 2px solid black;
    padding-bottom: 10px;   
}

#past-lessons a
{
    font-size: 73%;
    margin-right: 5px;
    border-right: 1px solid gray;
    padding-right: 7px;
}

#past-lessons a:hover
{
    text-decoration: none;  
}

#past-lessons a:active
{
    color:aqua;
}

#section-links
{
    list-style-type: none;
    text-decoration: none;
    position: relative;
    left: -15px;
    top: -15px;
}

#section-links a
{
    color: ghostwhite;
    font-size: 80%;
}

#section-links a:hover
{
    color: black;
    text-decoration: none;
}

#section-links a:active
{
    color: blueviolet;
}

.navbar
{
    display: flex;
    justify-content: flex-end;
}

.lesson-container
{
    margin: 15px 0px 15px 30px;
    border-bottom: 2px solid gray;
    padding: 15px 0px;
}

.lesson-header
{
     text-decoration: underline;
     margin-bottom: 25px;
}

.lesson-box
{
    background-color:cornsilk;
    width: 50%;
    padding: 15px;
    border: 1px solid black;
}

.lesson-notes
{
    margin-left: -20px;
}

#no-bot-border
{
    border-bottom: none;
}

.grid-box
{
    height: 100px;
    background-color: lightgray;
    margin: 0 auto;
    border-radius: 8px;
}

.grid-text
{
    text-align: center;
    margin: 30px auto;
    font-family: 'Overpass', sans-serif;
    font-size: 35px;
    box-shadow: 20;
}

@media (max-width: 1050px) 
{
    .grid-box
    {
        margin: 15px;
    }

    .grid-text
    {
        margin: 35px auto;
        font-size: 25px;
    }
}

#navbars-box
{
    height: 215px;
}

@media (max-width: 990px) 
{
    #navbars-box
    {
        height: 415px;
    }
}

.form-examples
{
    margin-bottom: 25px;
    border: 1px solid gray;
    padding: 10px;
    background-color: white;
    overflow: scroll;
}

.components-examples
{
    margin-bottom: 35px;
    border: 1px solid gray;
    padding: 10px;
}

.jumbotron
{
    background-image: url(imgs/water-large.jpg);
    background-size: cover;
    background-position: center;
}

.progress
{
    width: 100%;
}

#cards-box
{
    margin: 0 auto;
}

.btn-space, .card-text, .card-title
{
    margin: 5px;
}

.single-card
{
    min-width: 186px;
}

@media (max-width: 1665px) 
{
    .single-card
    {
        margin-top: 15px;
    }
}

.mpt-examples
{
    margin-top: 15px;
    margin-bottom: 25px;
}

#popover-example
{
    height: 100px;
}

JS:

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

$('[data-toggle="tooltip"]').tooltip();
htmlcssbootstrap-4tooltippopover


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions