Question

我将tippyjs https://atomiks.github.io/tippyjs/插件用于用户列表工具提示

问题：：click不适用于以上（图片）list item，因为styling我必须获得{ {1}}，然后执行refrence（困难，请参阅styling ）。

注意：：onShow()上的click以查看工具提示

codepen： https://codepen.io/anon/pen/eQrwQM?editors=0110#0

...

请事先帮助我！！！！

Answer 1

在调查事件和tippyjs库之后，我发现pointer-events: none被添加到了tooltip元素中，似乎阻止了对元素的定位，因此event.target是body而不是{{1 }}或ul。来自https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

在什么情况下（如果有）设置指针事件CSS属性特定的图形元素可以成为鼠标事件的目标。

显示通过设置li警报来重置此属性。这是完整的代码：

pointer-events: initial

如果要删除所有尖尖元素的指针事件，则可以添加CSS代码：

$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    success: function(json) {
        var logoutpage = '<ul class="all-users-content">';
        json.forEach((obj) => {
            logoutpage += '<li>' + obj.name + '</li>';
        });
        logoutpage += '</ul>';

        // actual tippy.js code

        tippy('.logout-top-corner', {
            content: logoutpage,
            delay: 100,
            arrow: true,
            arrowType: 'round',
            size: 'large',
            duration: 500,
            animation: 'scale',
            trigger: 'click',
            allowHTML: true,
            hideOnClick: true,
            // zIndex:9999999,
            onShow: function() {
                var refrence = document.querySelector('.logout-top-corner');
                var tip = refrence._tippy;
                var id = tip.id;
                setTimeout(function() {
                    $('#tippy-' + id + ' .tippy-tooltip.dark-theme').css({
                        background: '#fff',
                        border: '1px solid #ccc'
                    });
                    $('#tippy-' + id + ' .tippy-roundarrow').css({
                        fill: '#eaeaed'
                    });
                }, 200);
            },
            onShown: function() {
                console.log($(this));
                var refrence = document.querySelector('.logout-top-corner');
                var tip = refrence._tippy;
                var id = tip.id;
                var el = document.getElementById('tippy-' + id);
                el.style.cssText += 'pointer-events: initial';
                $(document).off('click', '.all-users-content li');
                $(document).on('click', '.all-users-content li', function() {
                    alert('clicked');
                });
            }
        });
    }
});

为什么Tippy.js光标指针和点击无法正常工作

1 个答案: