実現したいこと
bootstrap5.3でポップオーバーを動かしたいのですが、動作しません。
環境
・laravel10
bootstrap5.3公式ドキュメント
発生している問題・分からないこと
layoutsのapp.blade.phpにダウンロードページのCDNを読み込ませて、home.blade.phpにポップオーバーの有効化を<script>で囲んで、<button>を追加しました。
ですが、ポップオーバーをクリックしても動作しません。
やり方間違ってますか？それとも何か別でエラーが発生しているのでしょうか？
該当のソースコード
layouts.app
1<head> 2 3<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> 4 5</head> 6 7<body> 8 9 10 11<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> 12<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> 13<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> 14 15</body>
home.blade.php
1<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> 2 3<script> 4const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') 5const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) 6</script>
試したこと・調べたこと
上記の詳細・結果
同様のエラーを調べたりbingAIに聞いたりしましたが分かりませんでした
補足
特になし
0 コメント