Why tippyjs cursor pointer and click is not working as expected

Question

i'm using tippyjs https://atomiks.github.io/tippyjs/ plugin for user list tooltip

Problem: click is not working for above(image) list item, for styling i have to get the refrence and do styling(difficult, see onShow()).

Note: click on ... to see tooltip

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

$.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');
                    });
                  }
               });
            }
        });

Please help me thanks in advance!!!!!

Answer 1

After investigating events and tippyjs library I found that pointer-events: none is added to the tooltip element and it seems it is preventing from targeting elements so the event.target is body but not ul or li. From https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of mouse events.

By reseting this property via setting pointer-events: initial alert is shown. Here is the full code:

$.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');
                });
            }
        });
    }
});

If you want to remove pointer-events for all tippy elements you could add css code:

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