javascript - 将弹出框放在 noUiSlider handle 上

Question

我正在研究使用 noUislider 作为 slider 。我想做的一件事是，将鼠标悬停在 handle 上时，您可以看到一个弹出窗口，单击它后，弹出窗口内将发生另一个操作。如何定位 slider 内部的特定句柄 noUi-handle noUi-handle-lower 以触发弹出窗口？

澄清一下:该 slider 的下部 handle 是 slider 中的嵌入式子项。

<div id="slider1" style="width: 400px; margin: 0px auto 30px;" class="noUi-target noUi-ltr noUi-horizontal" data-placement="right" data-toggle="popover1" data-original-title="" > <div class="noUi-base"><div class="noUi-connects"></div><div class="noUi-origin" style="transform: translate(-100%, 0px); z-index: 5;">
<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="0.0" aria-valuetext="0.00"></div></div>
<div class="noUi-origin" style="transform: translate(0%, 0px); z-index: 4;"><div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="100.0" aria-valuetext="100.00"></div></div></div></div>

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('sliderx1')});

Answer 1

类似这样的事情应该可以做到:

// target the particular handle    
const handle = document.querySelector('.noUi-handle noUi-handle-lower');

handle.onmouseenter = function () {
    // code to insert popover HTML goes here
}

handle.onmouseleave = function () {
    // code to remove popover HTML goes here
}

我不会为你做“popover”HTML，因为那实际上可以是任何东西。我建议使用insertAdjacentHTML为了这。祝你好运。