将CSS应用于title属性的脚本的错误修复 [英] Bug fix for a script that applies CSS to the title attribute

问题描述

以下脚本将CSS类应用于html title属性.脚本所在的原始页面在这里:

The script below applies a CSS class to the html title attribute. The original page in which the script appears is here: How to change the style of Title attribute inside the anchor tag?

效果很好，但有一个小错误.如果title属性为空(<input type="text" title="">)，则它仍在屏幕上显示一个空的弹出框.

Works great, but has a minor bug. If the title attribute is empty (<input type="text" title="">), it still shows an empty popup box on screen.

有人可以帮助解决此问题吗?诸如如果title属性没有值，则不应用CSS，不显示弹出框.类似！

Can anyone please help with fixing this? Something like "if title attribute has no value, do not apply css, do not show popup box. Thank you!

以下脚本:

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

推荐答案

这种方式:

$(document).on("mouseenter", "*[title]:not([title=''])" ...

这篇关于将CSS应用于title属性的脚本的错误修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！