0

I'm using this CSS script to create tooltip popup bubbles. http://trentrichardson.com/examples/csstooltips/

I have it working ok but it is being hidden by an embedded iframe video in the div below.

When I hover over "number one" you can see it get hidden behind the video. However, when I hover over "number eleven" it is displayed correctly in front of the image.

I have tried changing the z-index values, but no change.

thank for your help

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title> ToolTip</title>

<style type="text/css">

* { padding: 0; margin: 0; }




#wrapper {
            position: relative;
            margin: 0 auto;
            width: 980px;
            height: 550px;
            }

#main {
            width:980px;
            height:50px;

            }

#main ul {
            margin:0;
            padding:0;
            list-style:none;



}

#main ul li {
            list-style:none;
            display:inline;


            }


#video {
            width:620px;
            height:500px;
            float:left;

            }

#img {
            width:360px;
            height:500px;
            float:right;

        }



/* TOOLTIP HOOVER */

a.tt {
            position:relative;
            z-index:24;
            color:#3CA3FF;
            font-weight:normal;
            text-decoration:none;
            }

a.tt span { 
            display: none; 
            }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover { 
            z-index:25; 
            color: #aaaaff; 
            background:;
            }

a.tt:hover span.tooltip {
            display:block;
            position:absolute;
            top:2px; left:0;
            padding: 15px 0 0 0;
            width:200px;
            color: #111;
            text-align: center;
            filter: alpha(opacity:80);
            KHTMLOpacity: 0.80;
            MozOpacity: 0.80;
            opacity: 0.80;
            }

a.tt:hover span.top {
            display: block;
            padding: 30px 8px 0;
            background: url(bubble.gif) no-repeat top;
            }

a.tt:hover span.middle { /* different middle bg for stretch */
            display: block;
            padding: 0 8px; 
            background: url(bubble_filler.gif) repeat bottom; 
            }

a.tt:hover span.bottom {
            display: block;
            padding:3px 8px 10px;
            color: #548912;
            background: url(bubble.gif) no-repeat bottom;
            }

            /* end TOOLTIP HOOVER */


</style>

</head>

<body>

<div id="wrapper">

<div id="main">




<ul>


    <li>
    <a href="#" class="tt">Number One
    <span class="tooltip">
    <span class="top">
    </span>
    <span class="middle"> 
    Avoid cross-browser javascript when you can use css to make tooltips with     less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
    </span>
    <span class="bottom">
    </span>
    </span>

    </a>
    </li>




    <li><a href="#">Number Two</a></li>
    <li><a href="#">Number Three</a></li>
    <li><a href="#">Number Four</a></li>
    <li><a href="#">Number Five</a></li>
    <li><a href="#">Number Six</a></li>
    <li><a href="#">Number Seven</a></li>
    <li><a href="#">Number Eight</a></li>
    <li><a href="#">Number Nine</a></li>
    <li><a href="#">Number Ten</a></li>

        <li>
    <a href="#" class="tt">Number Eleven
    <span class="tooltip">
    <span class="top">
    </span>
    <span class="middle"> 
    Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
    </span>
    <span class="bottom">
    </span>
    </span>

    </a>
    </li>




</ul>






</div>


<div id="video">

<iframe width="601" height="353" src="https://www.youtube.com/embed    /oao0H5dfyEQ?rel=0"     frameborder="0" allowfullscreen></iframe>



</div>

<div id="img">

<img src="http://i.imgur.com/P0ken.jpg" />

</div>




</div>

</body>
</html>
animuson
  • 53,861
  • 28
  • 137
  • 147
bob
  • 1
  • 1
  • 1
  • iframe has the highest z index value.. other element cannot be put above the iframe.. this can be solve by inserting iframe in the menu itself.. google for it – Ujjwal Manandhar Aug 24 '11 at 17:18

1 Answers1

0

I assume the iframe is going to pull up a flash player. You need to pass wmode=opaque to the player http://kb2.adobe.com/cps/127/tn_12701.html and as you don't control the iframe you are not going to be able to use it the way you need.

The older embed code for youtube with wmode setting was.

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>

Hat tip http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

As a side note wmode="transparent" also works.

Wayne
  • 4,760
  • 1
  • 24
  • 24