Tooltip Mouse Move Issue In Jquery

I used tool tip on mouse move. its working fine. but I couldn't access inside the anchor tag element. mouse cursor shouldn't be moved inside the tool tip container. I don't use any

Solution 1:

var tooltips = document.querySelectorAll('.tooltip span');
       window.onmousemove = function (e) {
       var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
        for (var i = 0; i < tooltips.length; i++) {
            tooltips[i].style.top = y;
            tooltips[i].style.left = x;
        }
    };

Not sure what you really meant from your question. Anyway try this js. It's working inside anchor tags too. :)

See this fiddle. Hope my answer helps. thanks http://jsfiddle.net/JVDFc/

Solution 2:

you dont need to check the client position for a tooltip. I would rather do this:

addTooltip: function(element, text) {
     var tooltip = $("<span>").css({
            position: "absolute",
            display: "none",
            background: "yellow"
        }).addClass("tooltip").text(text);
     $(element).append(tooltip);
     $(element).hover(function(){
         tooltip.css("display", "block"); 
     }, function(){
         tooltip.css("display", "none"); 
     });
},

The Code appends the Tooltip to the relevant Element and displays it if you hover over it. All you have to do now is change the CSS to your needs and you are done