https://uic.must.edu.mo/js/popper.js?20241028

1const button = document.querySelectorAll('.button');
2const arr = new Array(button.length).fill(false);
3
4button.forEach((item, index) => {
5  const tooltip = item.querySelector('.tooltip');//判断是否存在二级菜单
6  if (tooltip) {
7    const popperInstance = Popper.createPopper(item, tooltip, {
8      modifiers: [
9        {
10          name: 'offset',
11          options: {
12            offset: [0, 8],
13          },
14        },
15        {
16          name: 'preventOverflow',
17          options: {
18            padding:{right: 8},
19          },
20        },
21      ],
22    });
23  
24    function show() {
25      arr[index] = true;
26      tooltip.classList.add('second-menu-model-show');
27      // 使工具提示可见
28      tooltip.setAttribute('data-show', '');
29          // 启用事件侦听器
30      popperInstance.setOptions((options) => ({
31          ...options,
32          modifiers: [
33            ...options.modifiers,
34            { name: 'eventListeners', enabled: true, },
35          ],
36        }));
37
38      // 更新位置
39      popperInstance.update();
40    }
41  
42    function debounce(func,wait,immediate) {
43      let timer;
44  
45      return function () {
46        let context = this;
47        let args = arguments;
48  
49        if (timer) clearTimeout(timer);
50        if (immediate) {
51            var callNow = !timer;
52            timer = setTimeout(() => {
53                timer = null;
54            }, wait)
55            if (callNow) func.apply(context, args)
56        } else {
57            timer = setTimeout(function(){
58                func.apply(context, args)
59            }, wait);
60        }
61      }
62    }
63  
64  

65    function hide() {
66      // 隐藏工具提示
67      if (arr[index]) {      
68        return;
69      }
70      tooltip.removeAttribute('data-show');
71      // 禁用事件侦听器
72      popperInstance.setOptions((options) => ({
73        ...options,
74        modifiers: [
75          ...options.modifiers,
76          { name: 'eventListeners', enabled: false },
77        ],
78      }));
79    }
80  
81    const debounceHide = debounce(hide, 100)
82  
83    const showEvents = ['mouseenter', 'focus'];
84    const hideEvents = ['mouseleave', 'blur'];
85  
86    showEvents.forEach((event) => {
87      item.addEventListener(event, show);
88    });
89  
90    hideEvents.forEach((event) => {
91      item.addEventListener(event, () => {
92          arr[index] = false;
93          debounceHide();
94      });
95    });
96  }
97 
98})