2011-05-09 105 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/