CODEWITHSUNDEEP
javascriptjquery
Malasorte
Malasorte

Reputation: 1173

Bug fix for a script that applies CSS to the title attribute

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?

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.

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!

Script below:

// 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); }
}());

Upvotes: 0

Views: 1582

Answers (2)

Miguel
Miguel

Reputation: 20633

One way is to return immediately if there is no title: 

   $(document).on("mouseenter", "*[title]", function (e) {
        if (!$(this).attr('title')) return;
        // rest of code
    });

@c-smile's answer is cleaner though.

Upvotes: 2

c-smile
c-smile

Reputation: 27480

This way:

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

Upvotes: 2

Related Questions