https://levaa.app/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js

1dmx.Attribute('bs-tooltip', 'mounted', function(node, attr) {
2  let tooltip = bootstrap.Tooltip.getInstance(node);
3
4  this.$watch(attr.value, function(value) {
5    node.setAttribute('data-bs-title', value || '');
6    if (tooltip) {
7      try {
8        tooltip.setContent({ '.tooltip-inner': value || '' });
9      } catch (e) {
10        tooltip.dispose();
11        tooltip = new bootstrap.Tooltip(node, {
12          container: node.getAttribute('data-bs-container') || 'body',
13          placement: node.getAttribute('data-bs-placement') || 'top',
14          title: value || '',
15          trigger: 'hover focus',
16        });
17      }
18    }
19  });
20
21  if (!tooltip) {
22    const initial =
23      node.getAttribute('data-bs-title') ||
24      node.getAttribute('title') ||
25      '';
26    tooltip = new bootstrap.Tooltip(node, {
27      container: node.getAttribute('data-bs-container') || 'body',
28      placement: () => node.getAttribute('data-bs-placement') || 'top',
29      title: () => node.getAttribute('data-bs-title') || initial || '',
30      trigger: 'hover focus',
31    });
32  }
33
34  return () => {
35    if (tooltip) {
36      tooltip.dispose();
37    }
38  };
39});