JSFiddle - React, Tailwind, and code Playground

by Simon Davies

HTML

<div class="title">rid:<a id="hover-link" data-pid="item.pid" data-rmid="item.rmid">rid Details Hover over me</a></div>
<div id="showdata"></div>

JavaScript

$( "#hover-link" ).hover(
    //-- over effect
    function() {
      var s1 = $(this).data('pid'),
          s2 = $(this).data('rmid');
        
        //-- remove its only there to show it working without ajax
        $('#showdata').css({'display':'block'}).html('dfdsfsdfdsf');
        
        //-- uncomment the ajax code and you might have to tinker with the url
        //-- and the success data that is returned
       /* $.ajax({
            url:'index.php/controller/action/id/',
            data:{id: s1, mid: s2},
            type: 'POST,
            success:function(data,textStatus, jqXHR){
                 //-- dump the data out so you cen get the precise call to display
                //-- eg: data.myresult etc
                console.log(data);
                //-- block the requested div 
                $('#showdata').css({'display':'block'}).html(data);
            },
            error:function(jqXHR,textStatus, errorThrown){
               //-- display error here
                console.log(errorThrown);
            }
        });
    */
  }, function() {
      //-- out effect
      $('#showdata').fadeOut(function(){$('#showdata').css({'display':'none'}).html('')});
      
      
  }
);