Hi,
I'm trying to get the tool tip to work on a site that's not quite completed yet but its just not happening at ALL. Here's my html and css:
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Psychic Eyes of me, Katie Coutts</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="/tools/download/combine/1.2.3/jquery.tools.min.js?select=full&debug=true"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="leftpanel"><img src="images/png/leftwing.png" alt="left wing" title="left wing" width="281" height="130" border="0" /></div>
<div id="content"></div>
<div id="rightpanel"><img src="images/png/rightwing.png" alt="right wing" title="right wing" width="281" height="130" border="0" /></div>
</div>
<div id="navbar">
</div>
<script>
$("#navbar [title]").tooltip();
</script>
<div id="main">
</div>
</div>
</div>
</body>
</html>
Now the CSS...
#wrapper {
width: 900px;
height: 550px;
margin: 0 auto;
position: relative;
top: 100px;
}
#container {
width: 900px;
height: 150px;
margin: 0 auto;
position: relative;
top: 0px;
}
#leftpanel {
float: left;
width: 285px;
height: 140px;
display: inline;
}
#rightpanel {
float: right;
width: 283px;
height: 140px;
display: inline;
}
#content {
float: left;
left: 50px;
width: 256px;
height: 140px;
display: inline;
}
#main {
width: 900px;
height: 400px;
margin: 0 auto;
position: relative;
top: 0px;
border: 1px solid #000000;
}
#navbar {
width: 900px;
height: 40px;
margin: 0 auto;
position: relative;
top: 0px;
}
#navbar ul {
position: relative;
top: 5px;
margin: 0;
padding: 0;
display: block;
list-style: none;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
line-height: 30px;
white-space: nowrap;
}
#navbar li {
list-style-type: none;
display: inline;
}
}
.tooltip {
display:none;
background:transparent url(images/png/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
#navbar img {
border:0;
cursor:pointer;
margin:0 8px;
}
I really hope that someone can help,
Many thanks!
