2 replies [Last post]
cysklement
cysklement's picture
Offline
newbie
Brunei
Last seen: 7 years 12 weeks ago
Brunei
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">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <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; }
  </style>
</head>
<body>
<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>
<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>
<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> 
 <br>
<br>
<strong style="">Activated Calcium Powder</strong><br>
 <a class="tooltip" href="#">Microcal XP<span class="classic">123</span></a><br>
<br>
<strong style="">Mesh 100</strong><br>
<a class="tooltip" href="#">KP-100U<span class="classic">123sdsdsadsadsadsada
sdsdsdsdsd
sdsd
sdsdsd</span></a></font>
<meta http-equiv="content-type"
 content="text/html; charset=utf-8">
<title></title><p>&nbsp;</p>
</body>
</html>

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

Thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
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
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 30 weeks ago
india
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.