javascript - 使用 jquery 插件创建自定义工具提示

Question

使用带有鼠标隐藏和显示的 jquery 插件我正在尝试创建工具提示。我面临两个问题

1. 我的代码对于 mouseout 和 mouseleave 是否正确
2. 当我创建大量工具提示时，它的位置不正确，实际上它必须落到右侧。

我从堆栈溢出中找到了很多，但没有任何结果。

这是jquery代码

$(document).ready(function() {
            $(".tooltip").hide();
            $("#help").on({

                mouseenter: function () {
                    $("#showtooltip").show();
                },
                mouseleave: function () {
                    $("#showtooltip").hide();
                }
            });
            $("#help1").on({
                mouseenter: function () {
                    $("#showtooltip1").show();
                },
                mouseleave: function () {
                    $("#showtooltip1").hide();
                }
            });
            $("#help2").on({
                mouseenter: function () {
                    $("#showtooltip2").show();
                },
                mouseleave: function () {
                    $("#showtooltip2").hide();
                }
            });
        });

第三次鼠标悬停不起作用。我正在尝试创造我认为错过的东西。

这是 jsbin Link

请帮助我

感谢和问候马哈德万

Answer 1

只需将此 css 规则添加到您的 .tooltip 类中即可:

 position: absolute;
 top: 40px;  /* define how much space from tooltip to the top

还有这个 JavaScript:

$(document).ready(function() {
                $(".tooltip").hide();
                $("#help").on({

                    mouseenter: function (e) {
                        $("#showtooltip").show();
                        $("#showtooltip").css('left', e.pageX); // added

                    },
                    mouseleave: function () {
                        $("#showtooltip").hide();
                    }
                });
                $("#help1").on({
                    mouseenter: function (e) {
                        $("#showtooltip1").show();
                      $("#showtooltip1").css('left', e.pageX); // added
                    },
                    mouseleave: function () {
                        $("#showtooltip1").hide();
                    }
                });
                $("#help2").on({
                    mouseenter: function (e) {
                        $("#showtooltip2").show();
                        $("#showtooltip2").css('left', e.pageX); // added

                    },
                    mouseleave: function () {
                        $("#showtooltip2").hide();
                    }
                });
            });

我在 javascript mouseenter 函数中仅添加了这一行:

$("#showtooltip").css('left', e.pageX);

它设置工具提示左坐标，如果您有很多项目，工具提示将恰好显示在悬停项目的下方。

定制

如果您希望工具提示位于悬停项目的右侧，则需要添加以下 css:

var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);

并更改上面的 css top 属性。

更新由于您的这段代码耦合性很强，并且您要求更好的解决方案，因此这是 jQuery 代码:

$(document).ready(function() {
                $(".tooltip").hide();
                $(".help").on({

                    mouseenter: function (e) {
                        var tooltip = $(this).next();                                            tooltip.show();
                        tooltip.css('left', e.pageX + 20);

                    },
                    mouseleave: function () {
                        $(this).next().hide();
                    }
                });

            });

要实现此目的，您必须删除耦合的 ID，然后将其添加到每个 anchor 标记类 help 中。

代码只是检查用户是否将鼠标悬停在链接上，如果是，则仅显示其后的下一个元素，这恰好是工具提示。

这是一个FIDDLE

干杯