Question

我的网站上有一张桌子，当我将鼠标悬停在链接上时，我会创建一个工具提示，问题是当我将鼠标快速移动到链接上时，会显示多个工具提示，如下面的屏幕截图所示，

Multiple Tooltips

我需要一次只在屏幕上显示一个工具提示，如果用户不再悬停，则将其删除。我在ajax调用的成功函数旁边创建工具提示，所以如果控制器返回true状态，我将只显示工具提示。这个代码也可以在下面找到。有关如何确保一次只显示一个工具提示的任何建议。感谢您提供任何帮助。

  function tooltip(){
           $('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {

                var id = $(this).attr('value');

                var statusResponse;

                var selector = $(this);

                $.ajax({
                        url: '<%=Url.Action("Alarms") %>',
                        type: 'POST',
                        data: {id: id},
                        dataType: "json",
                        success: function (Response) {
                        if(Response.status == true)
                        {

                            var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
                            var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
                            var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>"; 

                            $(selector).qtip({        

                                content: {
                                text: html + Response.Response,
                                title: {
                                    text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
                                }

                                },
                                position: {
                                    target: 'mouse',
                                    adjust: {x:5,y:5}
                                },

                                show: {
                                    ready: true,
                                    effect: function () {
                                        $(this).slideDown();
                                }
                                },
                                style: {
                                    //classes: 'qtip-dark'
                                    classes: 'qtip-green'
                                },
                                hide: {

                                    effect: function () {
                                        $(this).slideUp();
                                    }
                                },
                                api: { 
                                        beforeShow: function() {
                                            $('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
                                        },
                                        beforeHide: function() {
                                            $('.qtip:visible').not(this.elements.tooltip).qtip('enable');
                                        }
                                     }

                            }, event);
                        }

                        }
                });


 });
 };

再次感谢您的帮助。

Answer 1

将AJAX来电存储在global变量

中

requestAjax = $.ajax({ ... });

在函数tooltip()的顶部，只需执行

if(requestAjax) requestAjax.abort();

然后隐藏所有工具提示，然后继续执行其余代码。

并添加

$("#tblOrder").mouseleave(function(){
    $(this).qtip("hide");;
});

Answer 2

现在，您可以在事件mouseenter上调用您的函数。

创建另一个事件mouseleave，其中包含使用ajax中止storedAjax.abort()来电的功能。但是要实现此功能，首先需要将ajax调用存储在全局变量中。

一次只有一个工具提示

2 个答案: