заставить всплывающую подсказку работать только в классе, а не в атрибуте title

Question

Этот код делает то, что я хочу, но по умолчанию везде на моем сайте, где есть атрибут title, он меняет стиль, который мне не нужен.

Я хочу, чтобы он работал только в некоторых местах, где я его назначаю .

Может кто-нибудь показать мне, как?

css

#tooltip {
    background: #C7100C;
    color:#fff;
    padding: 3px 10px;
    width:20%;
    white-space: pre-line;
}

Вот это js

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

Answer 1

Просто замените "*[title]" чем-то вроде ".make-tooltip" и назначьте этот класс элементам, для которых вы хотите иметь эту подсказку.

Таким образом, вы не нацеливаете все элементы, которые имеют заголовок, но только те элементы, которые имеют класс .make-tooltip.

(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", ".make-tooltip", 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); }
}());

#tooltip {
    background: #C7100C;
    color:#fff;
    padding: 3px 10px;
    width:20%;
    white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript;" class="make-tooltip" title="I am a title">I'm a link</a><br>
<a href="javascript;" title="I am a title">I'm a link</a><br>
<a href="javascript;" class="make-tooltip" title="I am a title">I'm a link</a><br>
<a href="javascript;" title="I am a title">I'm a link</a><br>
<a href="javascript;" class="make-tooltip" title="I am a title">I'm a link</a><br>