如何使用 popper.js 实现多个工具提示显示事件

Question

如何使用 popper.js

实现带工具提示的多跨度

HTML:

<div class="panel-custom">

   <span class="button" aria-describedby="tooltip">Test1</span>
   <div class="tooltip" role="tooltip">
     Test1
     <div class="arrow" data-popper-arrow></div>
   </div>
   <br />
   <br />
   <br />

   <span class="button" aria-describedby="tooltip">Test2</span>
   <div class="tooltip" role="tooltip">
     Test2
     <div class="arrow" data-popper-arrow></div>
   </div>
   <br />
   <br />
   <br />
</div>

CSS:

   .tooltip {
     background: #333;
     color: white;
     font-weight: bold;
     padding: 4px 8px;
     font-size: 13px;
     border-radius: 4px;
     display: none;
   }

   .tooltip[data-show] {
     display: block;
   }

   .arrow,
   .arrow::before {
     position: absolute;
     width: 8px;
     height: 8px;
     background: inherit;
   }

   .arrow {
     visibility: hidden;
   }

   .arrow::before {
     visibility: visible;
     content: '';
     transform: rotate(45deg);
   }

   .tooltip[data-popper-placement^='top']>.arrow {
     bottom: -4px;
   }

   .tooltip[data-popper-placement^='bottom']>.arrow {
     top: -4px;
   }

   .tooltip[data-popper-placement^='left']>.arrow {
     right: -4px;
   }

   .tooltip[data-popper-placement^='right']>.arrow {
     left: -4px;
   }

JavaScript :

 const tooltipContainer = document.querySelectorAll('.panel-custom');
   var popperInstance;
   var button;
   var tooltip;
 tooltipContainer.forEach(tooltipContainer => {
   button = document.querySelector('.button');
  tooltip = document.querySelector('.tooltip');
   popperInstance=  Popper.createPopper(button, tooltip, {
     modifiers: [{
       name: 'offset',
       options: {
         offset: [0, 8],
       },
     }, ],
   });
 });
function show() {
        // Make the tooltip visible
        tooltip.setAttribute('data-show', '');

        // Enable the event listeners
        popperInstance.setOptions((options) => ({
            ...options,
            modifiers: [
                ...options.modifiers,
                { name: 'eventListeners', enabled: true },
            ],
        }));

        // Update its position
        popperInstance.update();
    }

    function hide() {
        // Hide the tooltip
        tooltip.removeAttribute('data-show');

        // Disable the event listeners
        popperInstance.setOptions((options) => ({
            ...options,
            modifiers: [
                ...options.modifiers,
                { name: 'eventListeners', enabled: false },
            ],
        }));
    }
    
     const showEvents = ['mouseenter', 'focus'];
    const hideEvents = ['mouseleave', 'blur'];

    showEvents.forEach((event) => {
        button.addEventListener(event, show);
    });

    hideEvents.forEach((event) => {
      button.addEventListener(event, hide);
    });

只有第一个跨度与工具提示一起悬停，我只想让所有 2 个跨度都有自己的工具提示。无论如何，我可以在悬停时使用相应的工具提示管理所有跨度吗？另一个设法为每个工具提示创建，但工具提示的多个 class 没有显示事件或隐藏事件：https://jsfiddle.net/42Layk7t/

Answer 1

因此，当使用 createPopper 函数时，它似乎创建了可通过与您传递的 class 相同的名称访问的元素变量，在这种情况下 => .tooltip 它意味着你安装在同一个实例上

所以要有多个工具提示，您可以创建多个具有不同 classes 的元素并将其用于 setAttributes

tooltip = document.querySelector('.your-custom-class1');
tooltip = document.querySelector('.your-custom-class2');

而不是定位 tooltip.setAttribute('data-show', ''); 使用 querySelector 获取元素，然后使用 setAttributes

const tooltip = document.querySelector('your-custom-class1')
tooltip.setAttribute('data-show', '')

为了使箭头定位 css 起作用，请在每个箭头上保持 .tooltip class，这样您仍然可以定位元素

如何使用 popper.js 实现多个工具提示显示事件

How to implement multiple tooltip show event using popper.js

javascript

jquery

tooltip

popper.js