Member Avatar for abhi10kumar

I created a customized tooltip using CSS, it is working on Chrome and Firefox but not in IE.

Here is the code..

<style type="text/css" >
span.tool 
{  position: relative; }
 
span.tool span.tip 
{  display: none; }

span.tool:hover span.tip 
{
  display: block;
  z-index: 100;
  position: absolute;
  top: 1.6em;
  left: 200px;
  width: 450px;;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  text-align: left;
  color: #000;
  top:-100px;
}

#content span.tool::after 
{
  padding-left: 2px;            
  content: url(/img/bubble.gif);
}

</style>

Place where tool tip is showing..

<body>
<span class="tool">Wikipedia!<span class="tip">Hello
</span>
</span>
</body>
  • 2 Contributors
  • 3 Replies
  • 134 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by vibhaJ
Member Avatar for vibhaJ

Your code didnt work for me..
Try this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ToolTips Example</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: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; }		
		</style>
	</head>
	<body>		

		<p>
        <a class="tooltip" href="#">Classic<span class="classic">Mouse Over</span></a>
        </p>

	</body>
</html>
Member Avatar for abhi10kumar

Your code didnt work for me..
Try this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ToolTips Example</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: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; }		
		</style>
	</head>
	<body>		

		<p>
        <a class="tooltip" href="#">Classic<span class="classic">Mouse Over</span></a>
        </p>

	</body>
</html>

The same problem is still existing, It is working on Ch/FF but not in IE..

Member Avatar for vibhaJ

Which IE you are using?
I have checked in IE9,IE8,IE7.
Also check once in some another PC.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.