<div class="mediumbgAvatar" >
                  <img class="tooltipImg" title="<div class='tooltipBox'>
                <div class='avatar-tooltip'>
                 <img src='<?php echo base_url().'assets/images/default-avatar.jpg'; ?>' alt=''>
                </div>
                <div class='tooltip-container'>                                              
                                               <h5>test
                                                <small>kolkata</small>
                                                <img src='images/couple.png' alt=''>
                                                
                                               </h5>                  
                  <p><em>test test test</em></p>
                </div>
                <a href='#'><button type='button' class='tooltip-btn tooltipregister'><?php echo getLang('View_profile'); ?></button></a>
                
              </div>" src="<?php echo base_url().'assets/images/default-avatar.jpg'; ?>" >
                
                 </div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
     <script type="text/javascript">
     $(document).ready(function(){
        $.widget("ui.tooltip", $.ui.tooltip, {
          options: {
              content: function () {
                  return $(this).prop('title');
              }
          }
      });
    
      $( ".tooltipImg" ).tooltip();
      /*if($(window).width()>1024)
      {
          $( ".tooltipImg" ).tooltip({
              items: 'img.tooltipImg',   
              show: null, // show immediately
              open: function(event, ui)
              {
                  if (typeof(event.originalEvent) === 'undefined')
                  {
                      return false;
                  }
              
                  var $id = $(ui.tooltip).attr('id');
              
                  // close any lingering tooltips
                  $('div.ui-tooltip').not('#' + $id).remove();
                  
                  // ajax function to pull in data and add it to the tooltip goes here
              },
              close: function(event, ui)
              {
                  ui.tooltip.hover(function()
                  {
                      $(this).stop(true).fadeTo(400, 1); 
                  },
                  function()
                  {
                      $(this).fadeOut('400', function()
                      {
                          $(this).remove();
                      });
                  });
              }
          });
      }
      else
      {
          $( ".tooltipImg" ).tooltip();
          $('.inner_pages').on({ 'touchstart' : function(e){
                  var container = $(".ui-widget-content"); 
                  //alert(container.is(e.target));          
                  if (!container.is(e.target) && container.has(e.target).length === 0) 
                  {
                      container.hide();
                  }
              }
          });

          
      }*/
     })
      

     </script>