2011-05-09 212 views
1

想要顯示工具提示動態數據點擊 已經嘗試了很多插件,但沒有達到我的目標。jquery動態工具提示

這裏我的代碼:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tbl td").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("GetCellData")', 
      dataType: 'JSON', 
      data: { 
       time: $(this).parent().children().index($(this)), 
       name: $('td:first', $(this).parents('tr')).text(), 
       type: $('input[name="t"]:checked').val() 
      }, 
      success: function (response) {  
        /// 
        ///  HERE I NEED TO SHOW TOOLTIP 
        /// 
      } 
     }); 
    }); 
}); 

我需要使用回調 '響應',以顯示它的提示,在MUSE點擊單元格。 可以請你推薦我插件,爲我的問題。

回答

1

像這樣的事情

$(document).ready(function() { 
     $("#tbl td").click(function() { 
      var $td = $(this); 
      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("GetCellData")', 
       dataType: 'JSON', 
       data: { 
        time: $(this).parent().children().index($(this)), 
        name: $('td:first', $(this).parents('tr')).text(), 
        type: $('input[name="t"]:checked').val() 
       }, 
       success: function (response) { 
        var pos = $td.position(); 
        $('#tooltip').remove(); 
        $('<div/>',{html:response, id:'tooltip'}).css({left:pos.left+10+'px', top:pos.top+10+'px'}).prependTo('body'); 
       } 
      }); 
     }); 
    }); 

,並在你的CSS使那些創造這些規則

#tooltip{ 
    position:absolute; 
    width:150px; 
    padding:15px; 
    border:1px solid #000; 
    background-color:#fff; 
    color:#000; 
} 

可以樣式化無論如何,你喜歡的工具提示..當然..

演示http://jsfiddle.net/gaby/fFDhB/1/