2 replies [Last post]
cysklement's picture
Last seen: 7 years 46 weeks ago
Timezone: GMT+8
Joined: 2013-06-21
Posts: 1
Points: 2

hover text.jpg

Hi I am having my hover text that hides behind other content. I am using a weebly website creator to create my website using custom HTML.here are my codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <meta content="text/html; charset=ISO-8859-1"
  <style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
.tooltip span {
margin-left: -999em;
position: absolute;
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: inline; padding: 0.2em 0 0.6em 0;
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
<font size="3"><strong style="">Coated
Calcium Carbonate Powder</strong><br><a class="tooltip" href="#">Microcal 10DC<span class="classic">123</span></a> |
 <a class="tooltip" href="#">Microcal 10C<span class="classic"></span></a><br>
<strong style="">Ground Calcium Carbonate Powder</strong><br>
 <a class="tooltip" href="#">Microcal 10<span class="classic">123</span></a> | 
 <a class="tooltip" href="#">Microcal 5C<span class="classic">123</span></a> | 
 <a class="tooltip" href="#">Microcal 2<span class="critical">123</span></a> | 
 <a class="tooltip" href="#">Microcal 25<span class="custom">123</span></a> | 
 <a class="tooltip" href="#">Microcal PM-325<span class="classic"></span></a><br>
<strong style="">Ground Calcite Powder</strong><br>
 <a class="tooltip" href="#">KP-600U<span class="classic">123</span></a> | 
 <a class="tooltip" href="#">Microcal 250U<span class="classic">123</span></a> | 
 <a class="tooltip" href="#">Microcal 200U<span class="classic">123</span></a> 
<strong style="">Activated Calcium Powder</strong><br>
 <a class="tooltip" href="#">Microcal XP<span class="classic">123</span></a><br>
<strong style="">Mesh 100</strong><br>
<a class="tooltip" href="#">KP-100U<span class="classic">123sdsdsadsadsadsada
<meta http-equiv="content-type"
 content="text/html; charset=utf-8">

Mod edit// Please use code tags to wrap code for display in posts. Tags added.
Could you help me out with this?


Hugo's picture
Last seen: 6 years 18 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

It looks as though you have

It looks as though you have overflow hidden on the parent element, you could try adding z-index: 500 to .tooltip span but Life would be easier with a better markup structure.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

surajnaikin's picture
Last seen: 6 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

definitely overflow hidden

The code you've inserted is just the part where it creates the tool tips. If you can add the whole code can help find the issue, but it seems like either a bottom div has negative margin which overlaps the Tooltip other wise the main parent element have overflow:hidden. In this case the z index wont work, as no content will be seen out of overflow hidden area.