fix: initTooltip과 bootstrap-vue-3 충돌 문제 해결

- 기타 data-bs 안붙은거 마저 수정
2021-12-11 11:37:41 +09:00
parent 95bd5b539f
commit dfb10c1b44
15 changed files with 131 additions and 112 deletions
@@ -0,0 +1,46 @@
+import Tooltip from "bootstrap/js/dist/tooltip";
+//HACK: 이유는 잘 모르겠지만 bootstrap-vue3에서 bootstrap 호출하는 것과 충돌하여 우회 중
+import $ from "jquery";
+import { trim } from "lodash";
+
+export function initTooltip($obj?: JQuery<HTMLElement>): void {
+    if ($obj === undefined) {
+        $obj = $('.obj_tooltip');
+    } else if (!$obj.hasClass('obj_tooltip')) {
+        $obj = $obj.find('.obj_tooltip');
+    }
+
+    $obj.each(function () {
+        const $target = $(this);
+
+        if ($target.data('installHandler')) {
+            return;
+        }
+        $target.data('installHandler', true);
+
+        $target.on('mouseover', function () {
+            const $objTooltip = $(this);
+            if ($objTooltip.data('setObjTooltip')) {
+                return;
+            }
+
+            let tooltipClassText = $objTooltip.data('tooltip-class');
+            if (!tooltipClassText) {
+                tooltipClassText = '';
+            }
+            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`;
+
+            const oTooltip = new Tooltip(this, {
+                title: function () {
+                    return trim(this.querySelector('.tooltiptext')?.innerHTML);
+                },
+                template: template,
+                html: true
+            });
+            oTooltip.show();
+
+            $objTooltip.data('setObjTooltip', true);
+        });
+    });
+
+}