Почему указатель курсора tippyjs и щелчок не работают должным образом

Question

Я использую tippyjs https://atomiks.github.io/tippyjs/ плагин для всплывающей подсказки для списка пользователей

Проблема: click не работает для выше (изображение) list item, за styling я должен получить refrence и делать styling(сложно, смотриonShow()).

Замечания: click на ... чтобы увидеть подсказку

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

$.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));
                $(document).off('click','.all-users-content li');
                    $(document).on('click','.all-users-content li',function(){
                         alert('clicked');
                    });
                  }
               });
            }
        });

Пожалуйста, помогите мне заранее спасибо!!!!!

Answer 1

После расследования событий и библиотеки tippyjs я обнаружил, что pointer-events: none добавляется к элементу всплывающей подсказки, и кажется, что он препятствует нацеливанию элементов, поэтому event.target является body но нет ul или же li, С https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

CSS-свойство pointer-events устанавливает, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может становиться целью событий мыши.

Сбросив это свойство через настройку pointer-events: initial предупреждение показано. Вот полный код:

$.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, вы можете добавить код CSS:

*[id^='tippy-']{
    pointer-events: initial;
}