47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
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);
|
|
});
|
|
});
|
|
|
|
}
|