CODEWITHSUNDEEP
jquerycss
willdanceforfun
willdanceforfun

Reputation: 11240

How to create a tooltip with jquery without a plugin?

I have used a few different tooltip plugins over the years, but I think its become time to write my own. Simply, I'm not looking for a plugin which has all the options, as I know how I want every tooltip that pops up to look and behave. Most plugins have a range of animation and positions available and I think thats excessive for the lightweight one I'm wanting to create, with your help of course :)

Basically, using the title attribute of the hover, I want a tooltip to appear directly above and centered to the element being hovered.

I know how to populate the div that will be shown, but what I'm trying to work out, is how to tell that div to position itself directly above the element.

ideally this is done with minimal code. My logic says something like this (pseudo code):

<html>
<head>

<style type="text/css">

    #myToolTip { display: none; }

</style>


<script type="text/javascript">

$(document).ready(function() {

    $('.hoverAble').hover(function(){

        var tip = $(this).attr('title');

        $('#myToolTip').html(tip).fadeIn();

    }, function() {

        $('#myToolTip').fadeOut();

    }

});
</script>
</head>
<body>

<div id="myToolTip"></div>

<div class="hoverAble" title="I am good at code"></div>

</body>
</html>

of course the above code is just going to fill the tooltip and not be positioned relative to the hovered element. Thats where my understanding falls short. Can you help?

Edit: Just for clarification, i'm not wanting the tooltip to move with the mouse.

Upvotes: 7

Views: 14086

Answers (5)

huncyrus
huncyrus

Reputation: 658

One of the easyest to use the built-in jQuery.UI tooltip. 

$(document).tooltip();

And in html all of the "title" tags turn to tooltip... 

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

Upvotes: 0

Naveed
Naveed

Reputation: 42093

<div title="This is tooltip">Hover Me</div>

This simple tooltip is working for me. U can add any class to make it stylish.

Upvotes: 3

Shiva Srikanth Thummidi
Shiva Srikanth Thummidi

Reputation: 2908

I think this may help you.

<html>
<head>
<style type="text/css">
    #myToolTip { display: none;position:absolute; }
</style>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.hoverAble').hover(function(e){
        var left = mouseX(e);
        var top  = mouseY(e);
         var tip  = $(this).attr('title');

        $('#myToolTip').css('top',top);
        $('#myToolTip').css('left',left);
        $('#myToolTip').html(tip).fadeIn();


    }, function() {

        $('#myToolTip').fadeOut();

    })

});

mouse positions:

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}
</script>
</head>

html:

<body>

<div id="myToolTip"></div>

<div class="hoverAble" title="I am good at code">hi catch me</div>

</body>
</html>

Upvotes: 1

deceze
deceze

Reputation: 522081

Take a look at the various CSS functions in jQuery, mostly offset() and maybe height().

// pseudocode, assuming #tooltip has position: absolute
// do something similar with the left offset as well
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

This would place the tooltip statically over, or close to, the link, which I think is what you're looking for. If you want the tooltip to move with the mouse, you'll need to dynamically update the position in a mousemove event.

Upvotes: 5

Mutation Person
Mutation Person

Reputation: 30498

Without specific code examples, you can look at the contents of the event object (I'm assuming you're doing this on the onmouseover event).

Your clientX and clientY properties of this should help

Check out the following for the event object:

http://www.javascriptkit.com/jsref/event.shtml

Upvotes: 1

Related Questions