开发者

jquery dynamic tooltip

开发者 https://www.devze.com 2023-03-04 12:47 出处:网络
Want to show tooltip with dynamic data on clicking to Have tried many plugins, but didnt achieved my goal.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号