Popover

by aljordan82

HTML

<div id="popover">
        <div class="arrow">^</div>
        my popover</div>
    
    
    
    
    <table style="width:900px">
      <tr>
        <td>Jill</td>
        <td>Smith</td>		
        <td>50</td>
        </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>		
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>		
        <td>80</td>
      </tr>
      </table>

CSS

/* Styles go here */

#popover {
  border: 1px solid #ccc;
  background: #ccc;
  width: 300px;
  position: absolute;
  
  }

#popover .arrow {
    content:'^';
    position: absolute;
    top: -10px;
    
}
  
  
  
td 
{
   border: 1px solid #ccc;
   
  
}

JavaScript

// Code goes here



var $popover =$('#popover');
$(document).on('click', function(e){
  
    var $elem = $(e.target)
    var position = $elem.offset()
    var elemWidth = $elem.width();
    var elemHeight = $elem.height();
    var offsetRight = ($(window).width() - (position.left + $elem.outerWidth()));
    
    $arrow = $(".arrow", $popover)
    
    popoverWidth =$popover.width() 
    popoverHalfWidth = popoverWidth/2
    RelPosition = popoverHalfWidth - elemWidth/2
    $arrow.css({left: popoverHalfWidth -5 })

    
                   
                   
    if (position.left < popoverHalfWidth){
       RelPosition = 0      
              $arrow.css({left: 10 })
    }    
    if (offsetRight < popoverHalfWidth){
       RelPosition = popoverWidth -elemWidth
          $arrow.css({left: popoverWidth - 10 })
    }
    

    console.log($elem , position)  
    $popover.css({left: position.left - RelPosition , top: position.top + elemHeight +10})
  
  
  
  })