jquery dynamic tooltip
Want to show tooltip with dynamic data on clicking to Have tried many plugins, but didnt achieved my goal.
Here my code:
<script type="text/javascript">
$(document).ready(function () {
$("#tbl td").click(function () {
$.ajax({
type: "POST",
url: '@开发者_StackOverflow社区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
///
}
});
});
});
I need to use 'response' in callback, to show it in tooltip, on muse click to cell. Can you please reccomend me plugin, for my problem.
Something like this
$(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' );
}
});
});
});
and in your css create these rules
#tooltip{
position:absolute;
width:150px;
padding:15px;
border:1px solid #000;
background-color:#fff;
color:#000;
}
You can style the tooltip anyway you like of-course..
demo http://jsfiddle.net/gaby/fFDhB/1/
http://plugins.learningjquery.com/cluetip/demo/
or please mention the ones that have you tryed
I really like this one: http://vadikom.com/demos/poshytip/
K
精彩评论