bootstrap button tooltip

1<!-- Bootstrap button Tooltip 
2You can look here for in depth info: 
3https://getbootstrap.com/docs/4.0/components/tooltips/
4
5OR use the bellow example : -->
6<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
7  Tooltip on top
8</button>

1<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
2  Tooltip on top
3</button>
4<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
5  Tooltip on right
6</button>
7<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
8  Tooltip on bottom
9</button>
10<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
11  Tooltip on left
12</button>
13<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
14  Tooltip with HTML
15</button>

1$(function () {
2  $('[data-toggle="tooltip"]').tooltip()
3})

1<!-- Bootstrap 5 Tooltips -->
2<button
3   type="button"
4   class="btn btn-secondary"
5   data-bs-toggle="tooltip"
6   data-bs-placement="top"
7   title="Tooltip on top"
8>
9   Tooltip on top
10</button>
11<button
12   type="button"
13   class="btn btn-secondary"
14   data-bs-toggle="tooltip"
15   data-bs-placement="right"
16   title="Tooltip on right"
17>
18   Tooltip on right
19</button>
20<button
21   type="button"
22   class="btn btn-secondary"
23   data-bs-toggle="tooltip"
24   data-bs-placement="bottom"
25   title="Tooltip on bottom"
26>
27   Tooltip on bottom
28</button>
29<button
30   type="button"
31   class="btn btn-secondary"
32   data-bs-toggle="tooltip"
33   data-bs-placement="left"
34   title="Tooltip on left"
35>
36   Tooltip on left
37</button>

1<div class="text-center my-3">
2  <b-button v-b-tooltip.hover title="Tooltip directive content">
3    Hover Me
4  </b-button>
5
6  <b-button id="tooltip-target-1">
7    Hover Me
8  </b-button>
9  <b-tooltip target="tooltip-target-1" triggers="hover">
10    I am tooltip <b>component</b> content!
11  </b-tooltip>
12</div>