Add tooltip to mouse cursor with jQuery

How can we add tooltip to mouse cursor with jQuery or JavaScript?

Hello buddies,

Today we are going to do some fun with jQuery. 
Few days back I needed to add a crosshair mouse cursor and tooltip with text “click here to comment” on mouse move at a particular area of the web page.

Read Also : Best way to Check null, undefined, empty variables in JavaScript

If you are looking for the same. Let’s dive into it.

<style>
        .h-px-700 {
            height: 700px;
        }
        .cursor-crosshair {
            cursor: crosshair;
        }
</style>

<div class="card text-center mt-5">
    <div class="card-header">
        Add mouse tooltip
    </div>
    <div class="card-body h-px-700 cursor-crosshair position-relative card-area-js">

    </div>
</div>

Quick-tip: Why I have used js suffix to my div class (.card-area-js)?

Because sometimes we just remove css classes which we don’t want to use in the css perspective and we forget the js event attached with that css class. So, as per my opinion we should use this kind of classes which clearly shows that these are only for js use not for css.

Attach mouse move event with an element

$(document).on('mousemove', '.card-area-js', function(event) {
    // do code here
})

We have attached a mousemove event with a class .card-area-js. So, when you move the cursor in this area you can see the cursor will change into crosshair.

Get the offset of the card area

var position = $('.card-area-js').offset();

Get the offset of the card area and it will return the left and top position of the card in pixel relative to the document. Next thing is to get the outerwidth of the card area.

Get the outer width of the card area.

var outerWidth = $('.card-area-js').outerWidth();

It will return the computed outer width (including padding, border, and optionally margin). Outer width will be used to check the max limit for mouse tooltip. Because when the cursor will be near the end of the outerwidth, we will change it’s tooltip to the left. You can see this effect in the demo.

Get the left and top position for tooltip.

Getting the pageX and pageY from the event is providing the left and top position with a scrolled area. Like clientX and clientY is used to get the left and top position from the current browser window viewport and without scrolled area.

Final Javascript

$(document).on('mousemove', '.card-area-js', function(event) {
    
            var position = $('.card-area-js').offset();
            var outerWidth = $('.card-area-js').outerWidth();
            //console.log({position});
        
            var posX = position.left;
            var posY = position.top;
            var left = event.pageX - posX;
            var top = event.pageY - posY + 10;
        
            console.log({pageX: event.pageX}, {pageY: event.pageY}, {posX}, {posY});
        
            if ( left > (outerWidth - (outerWidth * 20 /100)) ) {
                left = left - (left * 15 /100);
            }
        
            hideClickToCommentToolTip();
        
            var draft_view = $('.card-area-js');
        
            if ( draft_view.find('.cmmbxpost').length === 0 ) {
                draft_view.append(`<div class="showclicktocomment border-radius-10 p-2 font-size-12 bg-dark text-white" style="z-index: 2147483647; position: absolute; left: ${left}px; top: ${top}px; display: block; font-family:GothamPro;">\Click To Comment\</div>`);
            }
            
        })
        
        $(document).on('mouseleave', '.card-area-js', function(event) {
            hideClickToCommentToolTip();
        })
        
        function hideClickToCommentToolTip() {
            var draft_view = $('.card-area-js');
            draft_view.find('.showclicktocomment').remove();
        }

Hope you find this article useful, please share it with your friends.