Hi Guys,
Having a few issues here - I am sort of almost there, but now completely stuck and hoping that some of you CSS/HTML Gurus can offer some assistance.
I am trying to do a "pure CSS based context highlight with tooltip" - I've pretty much got most of it together apart from the tooltip (lol!). I also wanted the tooltip to "hover" when the mouse moves over a field.
Currently, in Safari as well it seems that the "select" (yellow border) from the browser appears around the entire highlight ...
If someone can assist with these issues - love you long time!
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/ecmascript" />
<title>Demo</title>
<style type="text/css">
/*<![CDATA[*/
#fields {
padding-left:50px;
}
#example {
float: left;
width:500px;
padding-right:40px;
}
#example label {
display: block;
float:left;
}
#example dt {
float: left;
width: 50px;
clear: both;
padding-left: 5px;
z-index: 1;
position: relative;
vertical-align: middle;
line-height: 2em;
}
#example .tooltip {
float:right;
width:200px;
margin-top:5px;
visibility:hidden;
}
#example dd {
width: 200px;
float:left;
}
#example input[type=text], #example textarea {
margin: 5px 5px 5px 0;
width: 196px;
border:1px solid #CCC;
}
#example input[type=text]:focus, #example textarea:focus, #example .tooltip:focus {
border: #E9E9E9 solid ;
border-radius: 1px;
border-width: 5px 200px 5px 100px;
left: -100px;
margin: 2px 2px 2px 0;
position: relative;
z-index: 0;
float:left;
}
/*]]>*/
</style>
</head>
<body>
<div id="fields">
<form id="example" action="" method="">
<dt><label for="name">Name</label></dt>
<dd><input id="name" name="name" type="text" /></dd>
<div class="tooltip">some special tooltip</div>
<dt><label for="email">Email</label></dt>
<dd><input id="email" name="email" type="text" /></dd>
<div class="tooltip">some special tooltip</div>
<dt><label for="message">Message</label></dt>
<dd><textarea id="message" name="message" rows="5" cols=""></textarea></dd>
</form> </div>
</body>