Question

在一个奇怪的位置找到自己，我必须在所有工具提示的实例化中引用工具提示。

$('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true,
    animation: false,
}).on("mouseenter", function (e) {
    e.stopPropagation();
    var _this = e.target;
    $(_this).tooltip("show");
    $(".tooltip").on("mouseleave", function () {
        $(_this).tooltip('hide');
    });
}).on("mouseleave", function (e) {
    e.stopPropagation();
    var _this = e.target;
    setTimeout(function () {
        if (!$(".tooltip:hover").length) {
            $(_this).tooltip("hide");
        }
    }, 300);
});

话虽如此，我怎么能：

引用触发此jQuery调用的实际元素
当实际工具提示或生成它的元素悬停在其上时，保持工具提示处于打开状态？

这是JSFiddle原型的链接： Convert.FromBase64String(string)

Answer 1

使用event.target。

$('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true,
    animation: false,
}).on("mouseenter", function (e) {
    var _this = e.target;
    $(_this).tooltip("show");
    $(".tooltip").one("mouseleave", function () {
        $(_this).tooltip('hide');
    });
}).on("mouseleave", function (e) {
    var _this = e.target;
    setTimeout(function () {
        if (!$(".tooltip:hover").length) {
            $(_this).tooltip("hide");
        }
    }, 300);
});

e.target是事件源自的实际元素，而this是事件侦听器附加到的元素（相当于e.currentTarget）。

请注意，由于事件冒泡，事件将触发最多body的所有包含元素。您可能希望使用e.stopPropagation()来防止冒泡，因此您只需处理最深的元素。

我还更改了mouseleave上的.tooltip处理程序以使用.one()。否则，每次输入内容时，您都会在所有工具提示中添加另一个mouseleave处理程序，而不会移除前一个工具提示，很快就会有数千个处理程序在运行（这就是为什么它的原因）通常错误地绑定其他事件处理程序中的事件处理程序）。我确定您不需要mouseleave处理程序和附加到body的处理程序。

Answer 2

在“.on（）”调用中，您可以向匿名函数添加“event”参数。这将包含事件中的所有数据，包括触发事件的元素（它将被引用为“target”）。

}).on("mouseenter", function (event) {
    $(event.target).tooltip("show");
})

event参数包含大量数据，我将通过您的匿名函数中的console.log（事件）来解决它，以了解您可以使用哪些数据。

引用事件侦听器中的工具提示，以便在悬停时保持打开状态

2 个答案: