How can I display a tooltip with custom messages on different pages using javaScript?

Question

I have this code that I wrote which I am trying to use to display a tooltip with a custom message on different pages where the tooltip needs to be placed. Can you please have a look at this and help me so I can get it to work.

Currently what is happening in the code. I have tested it to see if it prints one of the strings from the object by explicitly declaring

customMessage[0].emailOrCell()

inside of the for loop which loops through customMessage object array. How can I get this to work properly?

Thanks in advance.

Code is below:

var customMessage = [{
    emailOrCell: function (message) {
        if (window.location == url) {
            message = "Please enter the email address or cell phone number associated with your WebsiteName account.";
        }

        return message;

    }
}, {
    forgotPassword: function (message) {
        if (window.location == url) {
            message = "If you have never previously logged in to the app or WebsiteName , your password is your ID number or your passport number.";
        }

        return message;

    }
}];

for (var i = 0; i < customMessage.length; i++) {
    var $tooltip = $("<div class='info-tip'><div class='tool-tip-pin'></div><h2 class='tool-tip-title'>Password</h2><div class='tooltip-text'>" + customMessage[0].emailOrCell() + "</div></div>");
}


$('.info-icon').mouseenter(function () {
    $($tooltip).insertAfter(".info-icon");
}).mouseout(function () {
    if ($($tooltip).is(':visible')) {
        $($tooltip).remove();
    }
});

Answer 1

An array with one object does not make much sense. May use a normal array instead?

var customMessages = [
function emailOrCell(message) {
    if (window.location == url) {
        message = "Please enter the email address or cell phone number associated with your WebsiteName account.";
    }

    return message;

}, 
function forgotPassword (message) {
    if (window.location == url) {
        message = "If you have never previously logged in to the app or WebsiteName , your password is your ID number or your passport number.";
    }

    return message;

}];

Now you can do:

customMessages.forEach(message=>{
 alert(message(" no problem detected!"));
});

Answer 2

I don't see any problem with your function except some jquery declarations, you don't have to declare $($tooltip) since is already a jquery element...

 var url='/test'; var customMessage = [{ emailOrCell: function (message) { if (window.location == url) { message = "Please enter the email address or cell phone number associated with your MySchool account."; } return message; } }, { forgotPassword: function (message) { if (window.location == url) { message = "If you have never previously logged in to the MySchool app or website, your password is your ID number or your passport number."; } return message; } }]; for (var i = 0; i < customMessage.length; i++) { var $tooltip = $("<div class='info-tip'><div class='tool-tip-pin'></div><h2 class='tool-tip-title'>Password</h2><div class='tooltip-text'>" + customMessage[0].emailOrCell('custom message') + "</div></div>"); } $('.info-icon').mouseenter(function () { $tooltip.insertAfter(".info-icon"); }).mouseout(function () { if ($tooltip.is(':visible')) { $tooltip.remove(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='info-icon'>info-icon</div>