I'm new to jQuery and I'm trying to realize a very simple tooltip just to learn how jQuery works.

After googling this is what I did:

jQuery:

$(document).ready(function(){

    $("#foo1").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x}).show();
    });

    $("#foo1").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x});
    });

    $("#foo1").mouseout(function(){
        $('#div1').hide();
    });

})

HTML:

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

I used var x = e.pageX - $("#container").offset().left; because I had problems when #div1 was inside a div with position: relative;

Everything works, but what if I add other links?

I would like to pass #foo1 and #div1 (and eventually #container, but actually I really don't need it) as parameters but the fact is that I have absolutely no idea on how to do this.

I tried searching here, I found this: JQuery, Passing Parameters

So I think that maybe I can do something like:

function doStuff(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

But I wouldn't know how to recall this function in HTML: in javascript I would have done something like onmouseover="doStuff('foo1', 'div1')", but I don't really know what to do with jQuery :|

EDIT:

This is the code that generates the divs:

foreach ($colors_array as $key => $value) {
    echo "<div id='foo" . $key . "'>";
    // something else
    // according to some condition, I will decide whether to
    // call or not the function doStuff for this div.
    echo "</div>";
}

I'm new to jQuery and I'm trying to realize a very simple tooltip just to learn how jQuery works.

After googling this is what I did:

jQuery:

$(document).ready(function(){

    $("#foo1").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x}).show();
    });

    $("#foo1").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x});
    });

    $("#foo1").mouseout(function(){
        $('#div1').hide();
    });

})

HTML:

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

I used var x = e.pageX - $("#container").offset().left; because I had problems when #div1 was inside a div with position: relative;

Everything works, but what if I add other links?

I would like to pass #foo1 and #div1 (and eventually #container, but actually I really don't need it) as parameters but the fact is that I have absolutely no idea on how to do this.

I tried searching here, I found this: JQuery, Passing Parameters

So I think that maybe I can do something like:

function doStuff(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

But I wouldn't know how to recall this function in HTML: in javascript I would have done something like onmouseover="doStuff('foo1', 'div1')", but I don't really know what to do with jQuery :|

EDIT:

This is the code that generates the divs:

foreach ($colors_array as $key => $value) {
    echo "<div id='foo" . $key . "'>";
    // something else
    // according to some condition, I will decide whether to
    // call or not the function doStuff for this div.
    echo "</div>";
}

• javascript
• jquery
• function
• parameters
• tooltip

Share Improve this question Follow edited May 23, 2017 at 11:49 CommunityBot 111 silver badge asked Jan 20, 2013 at 11:59 kelokelo 49922 gold badges1111 silver badges2020 bronze badges 3

• How about using child-selectors on $(this) instead of giving every element a unique ID? – Zeta Commented Jan 20, 2013 at 12:02
• have a look at jQuery.ready() – mercsen Commented Jan 20, 2013 at 12:04
• @mercsen: you mean this: jQuery(document).ready(function($) { // Code using $ as usual goes here. }); ? – kelo Commented Jan 20, 2013 at 12:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Here's another solution, find element next to a having tt class :

$(document).ready(function(){

    $(".tooltipped").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x}).show();
    });

    $(".tooltipped").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x});
    });

    $(".tooltipped").mouseout(function(){
        $(this).next('.tt').hide();
    });

})

Your html :

<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="tooltipped" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" class="tooltipped" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

How about the following: (assumes that you'll add class="active" to the elements you'd like to have hover effect + dynamic div is next to the a element)

$(document).ready(function(){

$(".active").each(function(index, value){
    $(this).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x}).show();                        
    });

    $(this).mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x});
    });

        $(this).mouseout(function(){
        $(this).next().hide();
    });
});

})

Sample HTML code:

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="active" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
    <a id="foo3" class="active" href="javascript:void(0);">[hover me too 3!]</a>
    <div id="div3" class="tt">I'm not working :(</div>
</div>

You already have what you need. You've confused yourself with your function name:

function setUpHandlers(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

$(document).ready(function(){
    //Ok, now set them up once
    setUpHandlers('#foo1', '#div1');
    setUpHandlers('#foo2', '#div2');
});