The Acorn Spirit's Journey

Bootstrap5.2、最新バージョンPopovers。

https://getbootstrap.com/docs/5.2/components/popovers/

HTML

<button type="button" class="btn" id="popoversTest" data-bs-container="body" data-bs-toggle="popover">ボタンとか</button>

　

オプションを使う

https://getbootstrap.com/docs/5.2/components/popovers/#options

JavaScript

<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
  
  const options = {
    html: true,
    content: 'これは<br>Popoversですよ。',
    trigger: 'hover',
    offset: [0, 10],
    placement: 'top',
    template: '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-body"></div></div>',
  };
  const exampleEl = document.getElementById('popoversTest');
  const popover = new bootstrap.Popover(exampleEl, options);
</script>

　

tooltips

tooltipsもほぼ同じ感じで。
https://getbootstrap.com/docs/5.2/components/tooltips/

<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  const options = {
    title: 'ツールチップのテキスト。',
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  };
  const exampleEl = document.getElementById('example')
  const tooltip = new bootstrap.Tooltip(exampleEl, options)
</script>