CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4popover
Jakub Muda
Jakub Muda

Reputation: 6714

Bootstrap popover - how to set position fixed?

How to set position fixed to Bootstrap 4 popover?

Bootstrap popover has default CSS:

.popover {
     position: absolute;
     top: 0;
     left: 0;
 }

and each popover has inline style set by JS:

<div
     class="popover fade bs-popover-right show"
     role="tooltip"
     id="popover706736"
     x-placement="right"
     style="position:absolute;transform:translate3d(302px,157px,0px);top:0px;left:0px;will-change:transform"
>
    <h3 class="popover-header"></h3>
    <div class="popover-body">
        <img class="img-fluid d-block" src="https://via.placeholder.com/600x400/6610f2/ffffff" alt="">
    </div>
</div>

In my example I am overriding both styles and popover appear at the center, but not exactly where it should be. Demo element with red borders is exactly at the center, but popover is slightly to the right.

For better appearance I removed arrow using custom popover template.

How to properly set position fixed to Bootstrap popover??

/*DEMO*/
#demo-buttons{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%)}
#demo-element{width:276px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;border:1px red solid}

/*popover override*/
.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>



<div id="demo-buttons">
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/007bff/ffffff' alt=''>">Popover 1</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/28a745/ffffff' alt=''>">Popover 2</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/dc3545/ffffff' alt=''>">Popover 3</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/6610f2/ffffff' alt=''>">Popover 4</button>

</div>


<!--DEMO ELEMENT AT THE CENTER-->
<div id="demo-element"></div>

<script>
$('[data-toggle="popover"]').popover({
    html:       true,
    trigger:    'hover',
    template:   '<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
});
</script>

Upvotes: 1

Views: 5073

Answers (1)

A. Meshu
A. Meshu

Reputation: 4148

Actually your code is working good and you need to override the margin property with !important to make it center:

.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
    margin: 0!important;
}

Snippet: 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        /*DEMO*/
#demo-buttons{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%)}
#demo-element{width:276px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;border:1px red solid}

/*popover override*/
.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
    margin: 0!important;

}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>



<div id="demo-buttons">
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/007bff/ffffff' alt=''>">Popover 1</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/28a745/ffffff' alt=''>">Popover 2</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/dc3545/ffffff' alt=''>">Popover 3</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/6610f2/ffffff' alt=''>">Popover 4</button>

</div>


<!--DEMO ELEMENT AT THE CENTER-->
<div id="demo-element"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('[data-toggle="popover"]').popover({
    html:       true,
    trigger:    'hover',
    template:   '<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
});
</script>
</body>
</html>

Upvotes: 2

Related Questions