ポップオーバー(popover)内で改行する – 【Bootstrap5.3】 | 株式会社CONFRAGE ITソリューション事業部

ポップオーバー(popover)内で改行する – 【Bootstrap5.3】

ポップオーバー(popover)内で改行する – 【Bootstrap5.3】

Bootstrap5.3でポップオーバー内で改行するには、data-bs-html="true"を指定する必要があります。

<button class="btn btn-primary" data-bs-toggle="popover" data-bs-title="タイトル" data-bs-html="true" data-bs-content="文章1<br>文章2">ボタン</button>

Bootstrap3ではdata-html="true"でしたが、Bootstrap5.xではdata-bs-html="true"になります。

html

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <!-- popover initialize start -->
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function () {
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      })
    </script>
    <!-- popover initialize end -->
    <title>Bootstrap5.3デモ</title>
  </head>
  <body>
    <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>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    <button class="btn btn-primary" data-bs-toggle="popover" data-bs-title="タイトル" data-bs-html="true" data-bs-content="文章1<br>文章2">ボタン</button>
  </body>
</html>

デモです。