鼠标输入时不显示工具提示

时间:2014-12-02 12:30:48

标签: javascript jquery qtip2

我正在使用qtip2从表格中的链接显示工具提示,我在鼠标输入时调用它。问题是工具提示没有显示,但警报工作,我不知道为什么工具提示不会显示。谢谢你的帮助。

$('#tblOrder tr td a').on('mouseenter',function(){


       alert('');

       var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);

          $(".proper a").qtip({

            content: {
            text: 'Loading.....',
                ajax: {
                url: '<%=Url.Action("Alarms") %>',
                type: 'POST',
                data: {id: id},
                success: function(data, status){
                    this.set('content.text', data);
                },
                error: function(xhr){
                    console.log(xhr.responseText);
                    console.log($('#tblOrder tr[id*="row"]').attr('id').substr(3));

                }
              }
            },
            show: {
        effect: function() {
            $(this).slideDown();
        }
    },
    hide: {
        effect: function() {
            $(this).slideUp();
        }
    }

            });

       });

我已经创建了一个jsfiddle来配合这个here

1 个答案:

答案 0 :(得分:0)

您在http://jsfiddle.net/f0sbo0vd/3/

$(document).on('mouseenter', '#tblOrder tr a', function(event) {
    $(".proper a").qtip({        
         content: {
             text: 'Loading.....',
             ajax: {
                 url: '<%=Url.Action("Alarms") %>',
                 type: 'POST',

                 success: function (data, status) {
                     this.set('content.text', data);
                 },
                 error: function (xhr) {
                     console.log(xhr.responseText);                  
                 }
             }
         },
         show: {
             event: event.type,
             ready: true,
             effect: function () {
                 $(this).slideDown();
             }
         },
         hide: {
             effect: function () {
                 $(this).slideUp();
             }
         }

     }, event);

 });

修改

要在链接上显示qtip,请使用此http://jsfiddle.net/f0sbo0vd/5/

只需更改

$(".proper a").qtip({ ... });

$(this).qtip({ ... });