I recently implemented these tooltips on my website. They look great in Chrome &

Question

0

Asked: May 24, 20262026-05-24T15:40:31+00:00 2026-05-24T15:40:31+00:00

I recently implemented these tooltips on my website. They look great in Chrome &

0

I recently implemented these tooltips on my website. They look great in Chrome & Safari, however in Firefox they are showing up at the top of the page instead of right over the link. Is there a CSS attribute I am forgetting to set for Mozilla Firefox? The tooltips look and animate fine so I’m thinking it is something small. Also if you look at the demo on their website in Firefox it looks like it works fine.

Here is my CSS for the tooltips:

div.e-profile_box {
    background: #FFFFDF;
    background-position:100% 0%;
    border:1px none #ccc;
    padding:30px;
    width: 25%;
    float: right;

    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
}

div.e-seeking_box {
    background: #EDEDED;
    background-position:100% 0%;
    border:1px none #ccc;
    padding:5px;
    width: 30.5%;
    float: right;
    text-align: center;
    font-size: medium;
    margin-top: 0px;
}

h1.c-name {
    font-size: 42px;
    color: '#003366';
    margin-bottom: 0px;
}

span.c-url {
    font-size: 12px;
}

span.c-address {
    font-size: 12px;
    color: black;
}

span.c-tax {
    font-size: 16px;
}


h2.e-profile {
    font-size: large;
    text-align: center;
}

p.e-profile {
    font-family: 'Lato';
    font-size: medium;  
    text-align: left;
}

div.c-profile { 
    font-size: 15px;
}

.contact1 {
    background: url(./img/bg_envelope.png) no-repeat 0px 0px;
    height: 280px;
    margin-top: 0px;
    padding:30px;
    width: 25%;
    float: right;
}

div.c-section {
    margin-left: 0;
    width: 65%;
}



/* Profile Data */
.e-dt{
    margin:0px 0px;
    padding:0px;
    list-style-type:none;
}

.e-dth{
    font-size: medium;
    color: black;
}

.e-dth ul li, .e-dtr ul li{
    display:inline-block;
    *display: inline;
    vertical-align:top;
    padding: 0px;
    list-style-type:none!important;
}

.e-col1{
    font-size: 15px;
    width: 50%;
}

.e-col2{
    font-size: 15px;
    width: 50%;
}

.tTip{
    width: 200px;
    cursor: pointer;
}

.tip {
    color: #333;
}

.tip {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 212px;
    height: auto !important;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    *display: inline;
    position: absolute;
    z-index: 500;
    background: transparent url(../img/tipTop.png) no-repeat top;
}

.tipMid {background: transparent url(../img/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(../img/tipBtm.png) no-repeat bottom; height: 32px;}

Here is my HTML(all included now):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


<html> 
    <head> 
    <!--    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> --> 
        <meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1"> 

        <title></title> 

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/js/jquery.betterTooltip.js"></script> 

        <script type="text/javascript" src="./js/jquery.dataTables.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.ColVis.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.FixedHeader.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.dataTables.TableTools.min.js"></script> 
        <script type="text/javascript" src="./js/jquery.colorbox.min.js"></script> 

        <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
        <link href="//fonts.googleapis.com/css?family=Tangerine:regular,bold" rel="stylesheet" type="text/css"> 
        <link href="//fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css" rel="stylesheet" type="text/css"> 
        <link href="http://www.datatables.net/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"> 
        <link href="./css/colorbox.css" rel="stylesheet" type="text/css"> 
        <link href="./css/b_style.css" rel="stylesheet" type="text/css"> 


        <!-- INCLUDED PREVIOUSLY --> 
        <script type="text/javascript" src="./includes/js/blockui.js"></script> 
        <link type="text/css" href="./jqalert/confirm.css" rel="stylesheet" media="screen"> 
        <script type="text/javascript" src="./includes/js/ui.core.js"></script> 
        <script type="text/javascript" src="./includes/js/ui.slider.js"></script> 
        <script type="text/javascript" src="./includes/js/ui.draggable.js"></script> 
        <script type="text/javascript" src="./jqalert/jquery.simplemodal.js"></script> 
        <script type="text/javascript" src="./jqalert/jquery.cookies.2.1.0.min.js"></script> 
        <script type="text/javascript" src="./lightbox_popup/thickbox.js"></script> 
        <link rel="stylesheet" href="./lightbox_popup/thickbox.css" type="text/css" media="screen"> 



    <script type="text/javascript"> 
        $(document).ready(function(){
            $('.tTip').betterTooltip({speed: 150, delay: 300});
        });
    </script> 



<script type="text/javascript"> 
    $(document).ready(function(){
        $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
    });//ready
</script> 


<script type="text/javascript"> 
    function closeEmailModal() {
        $(".example8").colorbox.close();

    }//closeEmailModal
</script> 

<script type="text/javascript"> 
    function emailFounder(to) {

        var subj = document.getElementById('email_subj').value;
        var body = document.getElementById('email_body').value;



        $(".example8").colorbox.close();


        //$.post("./ajax/misc/send_email.php", {to: to, from: 'info@website.com', subject: subj, body: body});

    }//emailFounder
</script> 






<script type="text/javascript" charset="UTF-8"> 
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "/";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.legacy = false;
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "GET";
/* ]]> */
</script> 
<script type="text/javascript" src="/includes/xajax5/xajax_js/xajax_core.js" charset="UTF-8"></script> 
<script type="text/javascript" charset="UTF-8"> 
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: /includes/xajax5/xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script> 

<script type="text/javascript"> 
//To show or hide Div.
function showhide(containerId, val) {
    if (val=='show'){ 
            document.getElementById(containerId).style.display="block";
        }
    else
        {
            document.getElementById(containerId).style.display="none";
        }
    }//End of To show or hide Div.



//function to empty the select box options values. 
function remove_selectboxvalues(selectId)
{
 $("#"+selectId).children().remove();
 }//End of function to empty the select box options values. 

//javascript function to add an option to a select box
function addOption(selectId, optionId, txt, val)
{
var objOption = new Option(txt, val);
objOption.id = optionId;
document.getElementById(selectId).options.add(objOption);
}//End of javascript function to add an option to a select box.



//function to save the search vales and display in select box.
function load_search_form(div_name, type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('search_form').innerHTML = objOption;
}//End of function to save the search vales and display in select box.
//function to load_body_table.
function load_body_table(div_name,page,sort_type,sort_order,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
if(type =='company'){
xajax.$('body_content').innerHTML = objOption;
}else{
xajax.$('body_content').innerHTML = objOption;
}
}//End of function load_body_table.

function set_watchlist(div_name,todiv,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('body_content').innerHTML = objOption;;
}//End of function set_watchlist.
function set_single_star_watchlist(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_watchlist.
function set_single_star_fev(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_single_star_fev.
function remove_single_star_fev(id,todiv,type)
{
var objOption = new Option(todiv, todiv);
objOption.id = optionId;
xajax.$(todiv).innerHTML = objOption;;
}//End of function set_single_star_fev.
function set_blacklist(div_name,todiv,type)
{
var objOption = new Option(div_name, div_name);
objOption.id = optionId;
xajax.$('body_content').innerHTML = objOption;;
}//End of function set_blacklist.
function setupCallback()
{
xajax.callback.global.onComplete = function()
{
alert('In global.onComplete');
};
}

        </script> 
<script type="text/javascript"> 
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
{
chk[i].checked = true ;}
}

function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++){
chk[i].checked = false ;}
}
// End -->
function check_loginLB(){
        if(document.getElementById('usernameLB').value == "" ||(trim(document.getElementById('usernameLB').value).length == 0) || (document.getElementById('usernameLB').value.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/) == -1)){
            alert("Please Enter Your email id properly");
            document.getElementById('usernameLB').focus();
            return false;
        }
        if(document.getElementById('passwordLB').value == "" ){
            alert("Please Enter password ");
            document.getElementById('passwordLB').focus();
            return false;
        }
        document.getElementById('login_btn').focus();
        document.user_login_frm.submit();
    }

    function show_forgot_div(){
        document.getElementById('forgot_pass_div').style.display = "";
        document.getElementById('login_div').style.display = "none";
    }
    function show_login(){
        document.getElementById('login_div').style.display = "";
        document.getElementById('forgot_pass_div').style.display = "none";
    }
    function focus_search(){
        document.getElementById('home_pg_search').select();
        document.getElementById('home_pg_search').focus();
    }
    function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
     function more_less(div1, div2) {
      document.getElementById(div1).style.display="block";
      document.getElementById(div2).style.display="none";
    }

</script> 

<script type="text/javascript"> 
    function emailEntrepreneur() {
        alert("Emailing Entrepreneur Through Modal Form");

    }//emailEntrepreneur
</script> 


<base href="website"> 
<link href="./css/general.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 
<div id="wrapper"> 
   <div id="header"> 
    <div id="logo"><a href="index.php"><img src="/images/cbi_logo.png" alt="CBI Logo" style="width: 280; height: 54; border: none;"/></a></div> 
  <div id="header_search"> 
      <form id="frm_hdr_search" name="frm_hdr_search" method="post" action="company_search.php"> 
        <table style="width=280; border=0; align=center; cellpadding=1; cellspacing=0;"> 
          <tr> 
            <td colspan="4" class="txt12"><strong>Search</strong></td> 
          </tr> 
          <tr> 
            <td colspan="3"><input name="search" type="text" class="inpt" id="search"></td> 
            <td style="width=53;"><a href="javascript:;" onclick="document.frm_hdr_search.submit()">Search</a></td> 
          </tr> 
          <tr> 
            <td width="84" valign="middle"><input type="radio" name="serch_type" id="radio" value="startup" checked="checked"/> 
              Companies</td> 
            <td width="72" valign="middle"><input type="radio" name="serch_type" id="radio2" value="investor"/>Investors</td> 
            <td width="63" valign="middle"><input type="radio" name="serch_type" id="radio3" value="deal"/>Deals</td> 
            <td width="53" valign="middle">&nbsp;</td> 
          </tr> 
        </table> 
      </form> 
  </div> 
        <div id="hdr_user"> 
   <div id="feedback"></div> 
    <span class="txt13">FName&nbsp;LName</span> <span class="txt16">|</span> <span class="txt13"> 
    <a href="user_logout.php?url=website/account.php">LOGOUT</a></span><br/> 
      <a href="user_logout.php?url=website/account.php">Click here if this is not you</a></div> 
        <div class="clr"></div> 
</div> 
  <div id="topnav"> 
    <ul> 
            <li><a href="company_search.php">Company Search</a></li> 
      <li><a href="investors_search.php" style="width:158px;">Investor Search</a></li> 
      <li><a href="deal_search.php">Deal Search</a></li> 
      <li><a href="dealflow.php">DealFlow</a></li> 
      <li><a href="analytics_trends.php">Analytics</a></li> 
      <li class='selected'><a href="fre.php">FRE Results</a></li> 
    </ul> 
  </div> 

    <div> 
        <div><h1 class='c-name'>Goals</h1><span class='c-url'><a href='http://www.goals.com' target='_blank'>http://www.goals.com</a><br/><span class='c-address'>San Diego, CA</span><div class='e-seeking_box'>Seeking:<br/><b>$500k to $1 million</b><br/></div><br/><br/><br/><a class='example8' href='website/fre_profile.php#'>Email the Founder</a></div><hr><span class='c-tax'>Internet&nbsp;&nbsp;|&nbsp&nbsp;Internet Software & Services&nbsp;&nbsp;|&nbsp;&nbsp;Personal & Professional Development</span><br/><br/><div class='e-profile_box'><h2 class='e-profile'>About the Founder</h2><hr><p class='e-profile'><b>Name:</b>&nbsp;&nbsp;Josh&nbsp;Smith<br/><br/><b>Role:</b>&nbsp;&nbsp;CEO / Owner / Founder<br/><br/><b>Education:</b>&nbsp;&nbsp;Bachelor's degree<br/><br/><b>Work Experience:</b>&nbsp;&nbsp;Less than 1 year<br/><br/><b>Entrepreneurial Experience:</b>&nbsp;&nbsp;Less than 1 year<br/><br/><br/><a class='example8' href='website/fre_profile.php#'><img src='http://website/img/email_icon.png' alt='email icon' height='25' width='25' style='text-align: center; border: none;'>&nbsp;Email the Founder</a></p></div><div class='c-profile'><h3>Description</h3><div class='c-section'><hr>Goals helps you dream big and make it happen.  You can also discover new things to do in life and new places to go. When you share your dreams and goals, we give you recommendations for similar dreams and goals along with potential obstacles and advice for overcoming them. We'll also suggest relevant questions, interests, places, and friends who share your goals. Goals aims to be the one place you go to make your life measurably better.</div><div class='tool_text'><br/><h3>Other Info</h3><div id='other_info' class='c-section'><hr><ul class='e-dt'><li class='e-dth'><ul><li class='e-col1'>Agent (<small>what's <a class='tTip' href='#' title='Agents help identify promising deal-flow that is on Website.  They include lawyers, accountants, and others engaged with promising companies.'>this?</a></small>)</li>Agent from Website</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Prior Funding Recieved</li><li class='e-col2'>No</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Stage</li><li class='e-col2'>Built the product / Have prototype</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Employees</li><li class='e-col2'>1 to 4</li><li class='e-col1'></li><li class='e-col2'></li><hr><li class='e-col1'>Revenue</li><li class='e-col2'>Zero revenue</li><br/><li class='e-col1'></li><li class='e-col2'></li></ul></li></div></div>      
                            <div style='display: none;'> 
                                <div id='inline_example1' style='padding:10px; background:#fff;'> 
                                    <h3>Email Josh Smith</h3> 
                                    <big><p>Use this form to contact the founder of Goals by email.  We will send a copy to your Website email address and also provide the entrepreneur's email address for future correspondence.</p></big> 

                                    <label for="email_subj">Subject:&nbsp;&nbsp;</label><br/><input id="email_subj" type="text" size="88"/><br/><br/> 
                                    <label for="email_body">Body:&nbsp;&nbsp;</label><br/><textarea id="email_body" cols="76" rows="10"> 







Regards,
FName&nbsp;LName
Company</textarea><br/><br/> 
                                    <button value="email@gmail.com" onclick="emailFounder(this.value);">Send</button>&nbsp;&nbsp;<button onclick="closeEmailModal();">Cancel</button> 
                                </div> 
                            </div> 
                        </div><br/><br/><br/><br/> 



    <br/><br/><br/><br/><br/><br/>  
    <div id="footer"> 
  <div class="footer_bkg"> 
    <div class="container"> 
      <div class="spanfull last"> 
        <div id="fnav"><a href="about.php" class="navbdr">About Website</a> <a href="tour.php" class="navbdr">Tour</a> <a href="website/blog" class="navbdr">Blog</a>  <a href="user_logout.php">Log Out</a> <a href="account.php" class="login">My Account</a>        <span class="copy" style="text-align:right">&copy; CB Information Services, 2010</span></div> 

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

        </div> 
    </div> 





    </body> 
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-24T15:40:31+00:00

Editorial Team

2026-05-24T15:40:31+00:00Added an answer on May 24, 2026 at 3:40 pm

Figured this out a while back, but forgot to post. The issue was inside of the betterTooltip.js file, the default animation was causing issues in FireFox for some reason. Below is what I did:

tip.css({'top': '+=35', 'left': '-=10' }).fadeIn('fast');  //custom -> browser compatible
//tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed); //default

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I recently implemented these tooltips on my website. They look great in Chrome &

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply