I’m trying to use the JQuery tools tooltips plugin in a site that I’m building for a scripting class. The problem is I’m using JQuery UI tabs for navigation in the site and apparently these two libraries don’t work well together. When I load the site outside of the index page (the site that has the tabs) the tooltips plugin works fine, it’s only when I load the page from the tabs that the tooltips stop working. This is how my index page is set up:
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
$('#tabs').tabs();
});
</script>
</head>
<body>
<div class="container">
<div id="tabs">
<ul id="info-nav">
<li><a href="home.html" title="home">Home</a></li>
<li><a href="product.html" title="products">Products</a></li>
<li><a href="UIDesign.html" title="Order">Order</a></li>
<li><a href="photos.html" title="FAQ">FAQ</a></li>
<li><a href="feedback.html" title="About">About</a></li>
</ul>
<!-- end .container --></div>
</div>
</body>
</html>
The page that I have the tool tips on is here:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/mainScript.js" type="text/javascript"></script>
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1 class="pageTitle">Products</h1>
</div>
<div id="sidebar">
<h2 class="subTitle">Sign up</h2>
<form>
<label for="fName">First Name:</label><br />
<input type="text" class="textbox" name="fName" width="5px"><br />
<label for="lName">Last Name:</label><br />
<input type="text" name="lName"><br />
<label for="email">e-mail:</label><br />
<input type="text" class="textbox" name="email"><br />
<label for="uName">Username:</label><br />
<input type="text" class="textbox" name="uName"><br />
<label for="password">Password:</label><br />
<input type="password"class="textbox" name="password"><br />
<label for="age">Age:</label>
<select name="age">
<option>Select Age Group:</option>
<option>16-20</option>
<option>21-25</option>
<option>26-30</option>
<option>31-35</option>
<option>36-40</option>
<option>41-50</option>
<option>51-60</option>
<option>61-70</option>
<option>71+</option>
</select><br />
<label for="gender">Gender:</label><br />
<input type="radio" name="gender" value="Male">Male<br />
<input type="radio" name="gender" value="Female">Female<br />
<input type="Submit" value="Submit">
<input type="reset">
</form>
</div>
<div class="content" id="bladeContent">
<h2 class="subTitle">GTX 590</h2>
<p class="productContent">
<img src="images/GTX590/GTX590-0.jpg" class="productThumb" alt="GTX 590">
<div class="tooltip">
<div class="photoGallery">
<img src="images/GTX590/GTX590-1.jpg">
<img src="images/GTX590/GTX590-2.jpg">
<img src="images/GTX590/GTX590-3.jpg">
<img src="images/GTX590/GTX590-4.jpg">
</div>
<table class="tooltipTable">
<tr>
<td>GPU: </td>
<td>GeForce GTX 590 (Fermi)</td>
</tr>
<tr>
<td>Core Clock: </td>
<td>612Mhz</td>
</tr>
<tr>
<td>Stream Processors: </td>
<td>1024 (512x2) Processor Cores</td>
</tr>
<tr>
<td>Effective Memory Clock: </td>
<td>3420Mhz</td>
</tr>
<tr>
<td>Memory Size: </td>
<td>3072MB</td>
</tr>
<tr>
<td>Memory Interface: </td>
<td>768-bit</td>
</tr>
<tr>
<td>Memory Type: </td>
<td>GDDR5</td>
</tr>
</table>
</div>
With 1024 CUDA cores,
6 billion transistors, 3GB of GDDR5 memory, and over 2200 individual components
all packed into an 11 inch dual slot PCB, GTX 590 is nothing short of an
engineering marvel. Designed to deliver not only the world’s fastest DirectX 11
performance, but also the world’s quietest acoustics for a dual chip graphics card,
the GTX 590 offers 50% faster performance than GTX 580 while nearly matching its
little brother’s award winning acoustics.
</p>
</div>
Sorry for the amount of code, I tried to reduce it to where I think the problem is but it’s proving to be quite a challenge. The thing I really don’t understand about UI tabs is where I import scripts and styles, should it be on my index page or every page?
The problem is that jquery ui and jquery tools share the same tabs library. this cusses a conflict. if you download only the jquery tools without the tabs it should solve this problem.