Bootstrap popover does not work as expected

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Popover</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
    
    <div class="container" style="margin-top:100px;">
        <button type="button" class="btn btn-primary" data-trigger="focus" data-toggle="popover" data-bs-placement="right" title="Popover on right" data-content="彈出提示框(Popover)的彈出位置在按鈕右方">
            Popover on right
        </button>
        <button type="button" class="btn btn-primary" data-trigger="focus" data-toggle="popover" data-bs-placement="top" title="Popover on top" data-content="彈出提示框(Popover)的彈出位置在按鈕上方">
            Popover on top
        </button>
        <button type="button" class="btn btn-primary" data-trigger="focus" data-toggle="popover" data-bs-placement="bottom" title="Popover on bottom" data-content="彈出提示框(Popover)的彈出位置在按鈕下方">
            Popover on bottom
        </button>
        <button type="button" class="btn btn-primary" data-trigger="focus" data-toggle="popover" data-bs-placement="left" title="Popover on left" data-content="彈出提示框(Popover)的彈出位置在按鈕左方">
            Popover on left
        </button>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

At least now when I clicked on the buttons, the popovers did show up but the data-content still could not be shown on the popovers so what is still missing in order to have the whole popover with the content shown?

Make sure jquery.js script include is *before* bootstrap.js include. And popper.js should be after bootstrap.js — freedomn-m, Jan 07 '22 at 08:03
Can you show me how should be the ordering of the links and scripts? — Dominic Ching Hei, Jan 07 '22 at 08:07

Dhanveer yadav · Answer 1 · 2022-01-07T14:55:23.173

0

Change data-placement attributes to data-bs-placement. https://getbootstrap.com/docs/5.0/components/popovers/ In bootstrap 5 they use data-bs-placement instead of data-placement and bootstrap 4 they use data-placement.

edited Jan 07 '22 at 14:55

answered Jan 07 '22 at 08:19

Dhanveer yadav

29
2

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 07 '22 at 08:31
It still does not work after changing the attribute – Dominic Ching Hei Jan 07 '22 at 11:44
show me the screenshot of the change you made. – Dhanveer yadav Jan 07 '22 at 14:57
1

Which screenshot? – Dominic Ching Hei Jan 07 '22 at 15:40
the changes you made in your code – Dhanveer yadav Jan 07 '22 at 15:41
Yes the above code and the picture are the updated version of my scripts. You may check – Dominic Ching Hei Jan 07 '22 at 15:48
change data-content to data-bs-content then it will work fine. I try it in my editor. – Dhanveer yadav Jan 07 '22 at 15:55
It works successfully now – Dominic Ching Hei Jan 07 '22 at 16:04

Bootstrap popover does not work as expected

1 Answers1