position fiddle

absolute inside relative

HTML

<div id="container"> 
    Mumbai
    <div id="parent">

        <div id="child" class="childclass">
            <table style="border-collapse: collapse">
           <tr>Mumbai
</tr>

<tr>

 <td> <img style="height: 20px" src="http://wpi.imodules.com/s/648/images/editor/thebridge2013/02_february/dss_icon.png" alt=""></td>
     

  <td   align="left">
    <img style="height: 20px" src="http://www.endlessicons.com/wp-content/uploads/2012/12/map-arrow-icon-614x460.png" id="imgNewYorkTrendImage" alt=""></img>
  </td>
 
 <td id="tdNewYorkValue" align="left" >
  <label id="lblNewYork">10.997</label>
                          
  </td>
 
   <td id="tdNewYorkTrend" align="left">
      <label id="lblNewYorkTrend">+ 1.68 %</label>
  </td>
</tr>
    
    <tr>

 <td> <img style="height: 20px" src="http://www.netsystemas.com/image/ico_cloud2.png" alt=""></td>
     

  <td   align="left">
    <img style="height: 20px" src="http://www.endlessicons.com/wp-content/uploads/2012/12/map-arrow-icon-614x460.png" id="imgNewYorkTrendImage" alt=""></img>
  </td>
 
 <td id="tdNewYorkValue" align="left" >
  <label id="lblNewYork">9.657</label>
                          
  </td>
 
   <td id="tdNewYorkTrend" align="left">
      <label id="lblNewYorkTrend">+ 3.78 %</label>
  </td>
</tr>
    <table>
           </div>         
      </div>
</div>

CSS

div#container {
     
      height:25px;
    
      
  }  
div#parent {
      width:50px;
      background-color:yellow;
      height:50px;
      margin:50px;
      cursor:pointer;
      position:absolute;
      border:1px solid black;
      border-radius:100%;
  }
  div#child.childclass {
      position:relative;
      display:none;
      width:150px;
      left:15px;
      top:100px;
      background-color:yellow;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
    border:1px solid black;
  }
    div#parent.active {
      background-color:rgba(0, 128, 0, .5);
      border:1px solid rgba(0, 0, 0, .5);
      }

JavaScript

;
var $p = $("div#parent");
var $c = $("div#child");

function firstFn(e,mode) {
    if (e.target != e.currentTarget) { //not correct div
        console.log(e.target);
        return;
    }
 
    //else {}
    console.log("first click " + mode);
    
    $c.css("display", 'block');
    $p.addClass("active");

}

function secondFn(e,mode) {
    if (e.target != e.currentTarget) { //not correct div
        console.log(e.target);
        return;
    }
    console.log("second click " +  mode);
     //  if (mode == "click") { e.stopPropagation()}
   
    $p.removeClass("active");
        $c.css("display", 'none');
}
/*

$p.hover(

function (e) {
    firstFn(e);
},

function (e) {
    secondFn(e);
});

*/
$p.on({
    mouseover: function(e){
            $p.on('mouseleave');
            firstFn(e,"hover");
    },
     mouseleave: function(e){
        secondFn(e,"hover");
     } });

// adding toggle function
$p.toggle(
   

function (e) {
    $p.off('mouseleave');
    firstFn(e,"click");
},

function (e) {
       $p.on('mouseleave');
    secondFn(e,"click");
});