div same as tooltip

Question

you helped me yesterday with create tooltip div. Today i would like to extend it. I have something like that: http://jsfiddle.net/Axjgf/18/

How can I change it so that the yellow box appears next to the box that I clicked on? For instance if I click on the purple box it should appear next to the purple box instead of the black.

thanks for help!

Answer 1

Have a look at the last example here: Query-Click Doc . Use $(this) for getting the clicked div attributes.

Answer 2

Solution:

http://jsfiddle.net/genesis/VmXU9/26/

Answer 3

If you want to change the color of the overlay box, you can give each smaller box its own click utility.

EDIT:

Just realized you wanted a position change! ;-) Code is fixed. See below.

   $("#TWO").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'blue', 'top' : '-320px'});

        });

    $("#five").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'purple', 'top' : '-280px'});

        });

    $("#six").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'yellow', 'top' : '-220px'});

        });

http://jsfiddle.net/jasongennaro/Axjgf/21/

EDIT 2:

Since the question changed, I edited the fiddle, to remove the background color change.

$("#TWO").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-320px'});

    });

$("#five").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-280px'});

    });

$("#six").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-220px'});

    });

http://jsfiddle.net/jasongennaro/Axjgf/22/

Answer 4

Since you're already using jQuery, I would highly recommend using the jQuery UI library's "Position" utility .

It has quite a few useful little methods for aligning objects relative to another object. For example using that library you could modify your click function to something like this (untested):

$('.click').click(function(){
    $(c) = $(this);
    $('#THREE').position({
        my: 'left top',
        at: 'right center',
        of: $(c)
    });
});