popup with jquery help

hi EE,
I have the following html, including css that creates a table like structure.  

I am now trying to create an event for each box so that when the visitor hovers over it a popup displays beside the adjacent box.

I would like the popup to fadeIn and fadeOut and the jquery needs to only allow one popup at one time, i.e when moving across of the boxes, it needs to hide any others.  

Let me know if you need more information.

Many thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
    <style type="text/css">
        .journey3Day, .journeyYear
        {
            float: left;
            margin-bottom: 10px;
            width: 300px;
        }
        .first
        {
            margin-right: 10px;
        }
        .journey3Day, .journeyYear
        {
            float: left;
            margin-bottom: 10px;
            width: 300px;
        }
        .first
        {
            margin-right: 10px;
        }
        .first
        {
            margin-right: 10px;
        }
        .journey3Day, .journeyYear
        {
            float: left;
            margin-bottom: 10px;
            width: 300px;
        }
        .first
        {
            margin-right: 10px;
        }
        .journey3Day, .journeyYear
        {
            float: left;
            margin-bottom: 10px;
            width: 300px;
        }
        .calendarView
        {
            margin: 0 0 0 25px;
            position: relative;
            width: 262px;
        }
        .OutboundDaySliderContainer
        {
            overflow: hidden;
            position: relative;
            width: 252px;
        }
        .OutboundDaySlider
        {
            left: -84px;
            position: relative;
            width: 420px;
        }
        .tab-content .day
        {
            color: #333333;
            display: block;
            float: left;
            margin: 0 3px 5px 0;
            text-align: center;
            width: 81px;
        }
        .tab-content .day
        {
            color: #333333;
            text-align: center;
        }
        .day ul li a:hover
        {
            border: 1px solid #FF7B00;
            color: #004B91;
            text-decoration: none;
        }
        .day ul
        {
            margin: 2px 0;
            padding: 0;
        }
        .day ul li, .day ul li a
        {
            min-height: 62px;
        }
        .day ul li
        {
            display: block;
            list-style: none outside none;
            margin-bottom: 3px;
            padding: 0;
            border: 1px solid #CCCCCC;
        }
        .day ul li.alternative a
        {
            background: none repeat scroll 0 0 #FFFFFF;
        }
        .day ul li, .day ul li a
        {
            min-height: 62px;
        }
        .day ul li a
        {
            color: #333333;
            display: block;
            padding: 25px 0 5px;
            position: relative;
        }
        .day ul li span.time
        {
            display: block;
            font-size: 0.92em;
            margin: 1px 0;
        }
    </style>
</head>
<body>
    <div id="pageWrap">
        <div class="ColumnLeft">
            <div id="">
                <div class="calendarTabs">
                    <div id="" class="tab-content">

                        <div class="tab-content-ReturnJourney contain">
                            <div id='' class='journey3Day first'>
                                <div id='' class="calendarView contain">
                                    <div class="OutboundDaySliderContainer">
                                        <div class="OutboundDaySlider">
                                            <div class="day">
                                                <span>test</span>
                                            </div>

                                            <div class="day">
                                                <span>test</span>
                                                <ul>
                                                    <li id='' class='alternative firstRowOut '><a id='' href="#" class=' '></span></span>
                                                        <span class="time">test </span><span class="time">test </span></a></li>
                                                    <li id='' class='alternative firstRowOut '><a id='' href="#" class=' '><span class="time">
                                                        test </span><span class="time">test </span></a></li>

                                                </ul>
                                            </div>
                                            <div class="day">
                                                <span>test</span>
                                                <ul>
                                                    <li id='' class='standard row1 '><a id='' href="#" class=' '><span class="time">test
                                                    </span><span class="time">test </span></a></li>
                                                    <li id='' class='standard row1 '><a id='' href="#" class=' '><span class="time">test
                                                    </span><span class="time">test </span></a></li>

                                                </ul>
                                            </div>
                                            <div class="day">
                                                <span>test</span>
                                                <ul>
                                                    <li id='' class='alt-lowest lastRowOut '><a id='' href="#" class=' '><span class="title">
                                                        test</span> <span class="time">test </span></a>

                                                    </li>
                                                    <li id='' class='alt-lowest lastRowOut '><a id='' href="#" class=' '><span class="title">
                                                        test</span> <span class="time">test </span></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Open in new window

bubble.gif
jimbona27Asked:
Who is Participating?
 
Frederick McIntyreConnect With a Mentor ProgrammerCommented:
I use Beauty Tips, which is a JQuery plugin. However, there's nothing more to adding the plugin than having a few lines in your head section to call in Javasscript files.
http://www.lullabot.com/articles/beautytips-09-release

It is very configurable. I think you will find it is just what you are looking for. You will not need your bubble.gif, since Beauty Tips creates the background on the fly. You can tell it to use the color of your gif. And it will position the arrow on the edge of it appropriately, depending on where the popup is - that is, if it is at the far riight edge of the browser, it will popup to the left, and the arrow will be on the right. If it is on the far left edge, it does the opposite. You can tell it the default popup position.

Here is the demo page:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

If you need further help, just say so.

0
 
SRigneyCommented:
you want a tooltip?   Look at cluetip http://plugins.learningjquery.com/cluetip/demo/
0
 
jimbona27Author Commented:
is it possible without a plugin?
0
 
jimbona27Author Commented:
i need to use my graphic so can I have an example using my markup and graphic please?

Thanks,
0
 
SRigneyCommented:
The general way of handling this is having a single div that is positioned absolutely at the location you want, but there's a lot that goes into detecting the edge of the browser.

You are probably going to be better off using something like cluetip and just modifying the background to include your image instead of using the default settings.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.