Showing a tooltip on "Login button" when the user is not logged in

Question

I am making a website, based on node.js, express. I have implemented all my login functionality by passport, and I am easily able to log in or log out by res.user .

However, I want to implement that when the user is not logged in, and click any link a tooltip should be displayed over my login button to display log in.

Possible methods which I have tried:

1. When I log in the user, the username is displayed after the page is refreshed. I tried to select it with jQuery and if the name is not found tooltip is to be displayed. However, i am unable to prevent the express from navigating to another page and displaying an error res.user is undefined which is of course because I have not logged in.
2. After lot of digging, i found out it could be done with ajax, however, i am really new to it, and not able to figure out exactly how to use it.

I have implemented the first one however tooltip is not showing whatsoever, here is my code for ajax:

$(function () {
$('#selfielogin').click(function (e) {
    console.log("alpit");
    e.preventDefault();

    $.ajax({
        url: '/selfie',
        type: 'GET',
        success: function () {
            console.log("*********************");
        },
        error: function() {
          //to show tooltip on login button that you need to login
         }
     });
})
   })

and here is my code where i want my tooltip

 <li class="nav-item"> <a id="fblogin" href="/auth/facebook"> <img src="./css/img/fblogin.png" class="img-fluid"> </a> </li>

I am using bootstrap too.

Answer 1

I finally figured it all out by using tippy.js Here is the code:

$(function () {
$('.event').click(function (e) {
    e.preventDefault();

    $.ajax({
        url: '/eventname/selfie',
        type: 'GET',
        success: function () {
            console.log("logged in");
        },
        error: function () {
            var btn = document.querySelector('#fblogin');
            tippy(btn, {
                size: 'large',
                distance: 25
            })
            btn._tippy.show();

        }
    });
})

})