lightbox, tool tips not working with foundation - tooltip

Question

I applied foundation.css to make my site responsive. But after that tool tips, light box is not working. Fonts are getting larger. Where should I correct in my custom.css or foundation.css
Tool tip not working in this site
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
body,
td.sohotext,
td.text,
p,
span {
font-family: sans-serif, Helvetica, Verdana, Arial;
font-size: 13px;
color: #525252;
line-height: 140%;
}
/* Fixes and hacks */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html input.quick_signup {
background-attachment: fixed;
}
/*END - Fixes and Hacks */
/* Navigation */
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
display: block;
padding-right: 13px;
float: left;
padding-top: 5px;
padding-left: 13px;
padding-bottom: 5px;
background-image: url(images/menu_div.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
}
#mainnav a:hover {
color: #36CC2F;
background-image: url(images/nav_active.jpg);
background-repeat: repeat-x;
background-position: right top;
padding:4px 12px 4px;
}
.hmains {
font-size: 100%;
}
#megamenu {
list-style-type:none;
width:100%;
margin: 3px auto 04px auto;
height:40px;
padding:2px 0px 3px 0px;
}
table.vmenu_subs {
margin-bottom: 30px;
margin-top: 15px;
}
/*#leftav a:link, #leftnav a:visited, */
a.vmenu_sub_off:link,
a.vmenu_sub_off:visited,
a.vmenu_sub_on:link,
a.vmenu_sub_on:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
color: #000;
background-image: url(images/sideNav_bullet.gif);
background-repeat: no-repeat;
background-position: left center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #acacac;
text-decoration: none;
padding-left: 24px;
display: block;
width: 150px;
}
/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active {
color: #666;
}
a:link, a:visited {
color: #00CC00;
text-decoration: none;
}
a:hover {
color: #009900;
margin-top:0px;
margin-bottom:0px;
}
#feat a:link, #feat a:visited {
color: #fdb417;
text-decoration: none;
}
#feat a:hover {
color: #fed27e;
}
/*END - Navigation */
#headwrapper {
background-image: url(images/top_bg.png);
background-repeat: 50% no-repeat;
margin: 0px;
padding: 0px;
height: 109px;
position: relative;
}
#featwrapper {
background-color: #1e8019;
height: 124px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #185d14;
overflow: hidden;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #2b9d22;
}
#feat {
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-image: url(images/feat_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 124px;
color: #FFFFFF;
}
#navwrapper {
background-color: #1e8019;
height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b9d22;
border-bottom-color: #185d14;
}
#nav {
background-image: url(images/nav_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
max-width:880px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
}
#contentwrapper {
background-color: #ededf1;
margin: 0px;
padding: 0px;
}
#maincontent {
background-image: url(images/content_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #ededf1;
}
#mainnav {
width: 72%;
float: left;
padding-left: 5px;
}
#signup {
width: 25%;
padding-left: 5px;
float: left;
height: 20px;
padding-top: 2px;
font-size: 85%;
color: #cccccc;
text-align: center;
}
#subnav {
margin: 0px;
float: left;
min-width:155px;
width: 25%;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#belowmenu {
display: block;
float: left;
width: 210px;
padding-top: 15px;
padding-left: 5px;
}
div.sidebox {
display: block;
float: left;
width: 210px;
}
#content {
margin: 0px;
width: 70%;
float: left;
padding-top: 12px;
padding-right: 7px;
padding-bottom: 12px;
padding-left: 7px;
overflow: visible;
}
#date {
font-size: 90%;
text-align: right;
color: #858585;
}
#featleft {
float: left;
width: 25%;
padding-left: 5px;
padding-top: 5px;
}
#featright {
float: left;
width: 72%;
padding-left: 10px;
padding-top: 5px;
}
#footer {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
font-size: 85%;
padding-bottom: 10px;
color: #939393;
}
#head {
height: 109px;
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
#logo_box {
height: 109px;
float: left;
width: 28%;
}
#tagline {
float: left;
width: 70%;
color: #999999;
text-align: right;
padding-top: 22px;
}
#logo {
position: absolute;
top: 3px;
}
#trimbar {
background-color: #000000;
margin: 0;
padding: 0;
height: 7px;
width: 100%;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
div.newsbox {
line-height: 115%;
}
/*hiding from IE mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* end hiding from IE mac */
#footerwrapper {
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #959595;
background-color: #CCCCCC;
}
/* Integrated Styles */
.portfolio {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
width: 100%;
overflow: auto;
}
span.alert,
span.profile,
span.download,
span.search {
display: block;
float: left;
margin: 10px;
padding: 10px 10px 10px 45px;
}
span.alert {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_alert.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.profile {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_profile.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.download {
width: 100%;
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_download.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.search {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_search.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.product {
color: #333333;
background-color: #fff;
border: 1px solid #b6b6b6;
margin: 10px;
padding: 10px;
font-size: 10px;
line-height: 145%;
display: block;
}
blockquote {
border-top: 4px solid #D3D3D3;
border-bottom: 4px solid #D3D3D3;
margin: 10px;
padding: 10px 10px 5px 45px;
background-color: #f5f5f5;
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
blockquote p {
padding-right: 35px;
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image: url("images/li_bullet.gif");
background-position: 0px 4px;
background-repeat: no-repeat;
overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/
padding-left: 14px;
margin-left: 0px 4px;
font-size: 12px;
}
ul, li {list-style-type:none !important;}
}
h4 {
font-size: 115%;
color: #333;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
#feat h4 {
color: #fdb417;
}
h4 {
font-size: 120%;
color: #0066FF
}
h3 {
font-size: 150%;
color: #1E7D19;
}
h2 {
font-size: 180%;
color: #196115;
}
input.login_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/login_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.pass_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/password_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.quick_signup {
border: 0;
height: 19px;
width: 168px;
padding-left: 32px;
padding-top: 3px;
margin-top: 4px;
background-image: url(images/quick_signup_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #ededed;
}
div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10
{
padding-left: 28px;
padding-bottom: 10px;
background-image: url(images/answer.gif);
background-repeat: no-repeat;
background-position: 2px 0;
}
table#Search_Form,
table#Search_Form2 {
}
table#Detail_Results2,
table#Initial_Results {
margin-top: 15px;
}
.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;
}
#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
padding: 0px!important;
background:inherit!important;
}
#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
bottom: 0;
padding-top: 0px;
position: absolute;
right: 0;
width:62%;
}
#tagline img {
margin: 0px 0px -12px;
height: auto!important;
max-width: 100%;
width: auto!important;
max-height: 68px;
min-height:45px;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" />
<link rel="stylesheet" type="text/css" href="tooltip/themes/2/tooltip.css" />
<link rel="stylesheet" type="text/css" href="lightbox/css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" />
<link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" />
<script type="text/javascript" src="http://www.egtours.com/tooltip/themes/2/tooltip.js"></script>
<script type="text/javascript"src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/mcVideoPlugin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/js-image-slider.js"></script>
<script src="http://www.egtours.com/float-panel.js"></script>
<script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://www.egtours.com/motionpack.js"></script>
<script src="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/js/vendor/modernizr.js"></script>
</head>
<body>
<body onload="slidedown('featwrapper');">
<div id="headwrapper">
<div id="head" class="clearfix">
<div id="logo_box"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></div>
<div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div>
<div id="trimbar"></div>
<div id="featwrapper" style="display: none; height: 124px; overflow: hidden">
<div id="feat" class="clearfix">
<div id="featleft">#NEWSBOX#</div>
<div id="featright">#PROMOTXT1#</div></div></div>
<div id="navwrapper">
<div id="nav" class="clearfix">
<div id="signup"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></div>
<div id="mainnav">#MEGAMENU#</div></div></div>
<div id="contentwrapper">
<div id="maincontent" class="clearfix">
<div id="subnav">#VSUBS#
<div id="belowmenu">#POWERPLUG4#</div></div>
<div id="content">
<div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div>
<div id="footerwrapper">#COPYRIGHT#<div id="footer">
<table id="table1" border="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td colspan="7" align="left">
<p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| Privacy Statement</p></td></tr>
<td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td>
<td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td>
<td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td>
<td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br />
</td>
<td width="71">
<p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td>
<td width="26">
<p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td>
<td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table></div></div>
<script type="text/javascript" src="http://www.egtours.com/lightbox/js/lightbox.js"></script>
<div id="backtop">▲</div>
#jquery#
<script>
/* Remove the slogan div cleanly if it's not in use */
$(function () {
if($(".slogan").html().length === 0) {
$(".slogan").remove();
}
/* Expand the content area out if the sidebar isn't in use */
if (!$("#box-one").text().trim().length){
$(".middle").addClass("large-12").removeClass("large-8");
$(".box").remove();
}
});
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Answer 1

Your path's to foundation.tooltip.js and to foundation1.css are incorrect and they are not loading, therefore no tooltips. If you want your own custom.css file to override any of foundation's css, it needs to load after foundation1.css.