|
| |
|
|
Nicole
Posts: 2843
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
CSS Tooltip problem... - 3/14/2006 17:15:08
Hi everyone,
I have a problem with some tooltips I'm using on a medical related website and can't seem to find anything by searching online for a solution. In fact I haven't even been able to locate a site with a similar problem or one that has found a fix.
I'm using tooltips for certain medical terms as they allow for a more detailed definition than the <acronym> element, the tooltips appear many times within each page as can be seen in the image below. You'll notice in that small image that there are about 4 tooltips (dashed underline) within a short section of a paragraph, this is typical of how often they appear within the site I'm working on.
Anyway, I can't figure out how to make one tooltip appear over another underlined word, in other words the tooltip is appearing over the normal paragraph text but not over those words which are also tooltips. Any clues?
Here is my CSS:
p.tooltip {
color: #444;
font-size: 0.75em;
line-height: 1.5;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
background-color: #fff;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
}
p.tooltip a {
position: relative;
color: #444;
border-bottom: 1px dotted #666;
text-decoration: none;
cursor: help;
z-index: 3;
}
p.tooltip a span {
display: none;
}
p.tooltip a:hover {
font-size: 100%;
text-decoration: none;
} /* IE/Win requires some link change on hover in order to show the tooltips */
a:hover span {
display: block !important;
position: absolute;
top: 5px;
left: 40px;
width: 160px;
border: 1px solid #7a052c;
background-color: #eee;
text-align: left;
color: #000;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.9em;
}
and here is the html for that section in the image:
<a href="#">"topical anesthesia"<span>Superficial loss of sensation in the mucous membranes or the skin, produced by direct application of a local anesthetic.</span></a>
for clear cornea <a href="#">cataract<span>Abnormal clouding or opacities within the lens of the eye.</span></a> surgery as part of her cataract surgery technique.</p>
<p class="tooltip">he is a graduate of the X of X of Medicine, receiving the Citation for graduating in the top 10% of her medical school
class. Dr. X was initiated into the Medical Society while still in his medical school training in Kansas. During
the completion of her <a href="#">ophthalmology<span>The branch of medicine that deals with the anatomy, functions, pathology, and treatment of the eye.</span></a>
residency training in X, he was voted "The Most Outstanding Third-Year Resident" by his peers.</p>
Also, another question, as you can see the once clean code has become quite messy with all of these tooltips scattered throughout the html. I was wondering whether there was a way to take out the "definition" part of the tooltip from the html and somehow "draw" that information from either the CSS or another page set aside for just the definitions?
Thanks for reading these long winded questions.
Nicole
Edit: I should've turned the mouse on in the screenshot, but that tooltip refers to the first underlined word which is partially cut off.
Thumbnail Image
 Attachment (1)
_____________________________
|
|
|
|
dpf
Posts: 7123
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 18:02:31
quote:
somehow "draw" that information from either the CSS or another page set aside for just the definitions? you could make a simple javascript function - storedeither in the head section or an external file..and then "call that function" each time you need it so it could write the description. the resultant html on your page as the browser displayed it would look the as now but in your authoring copy it wouldn't show and the download time would shorten as the repititous text would only be downloaded once - in the javascript function.
hth
_____________________________
Dan
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 18:20:08
Hi Nicole, I've been playing around with tool tips a bit and have had similar problems.
Adding margin-top: 10px to your a:hover span should drop the tip enough to display the text.
FWIW, below is your code thrown into my play sheet (note to those who have a clue, this is just for play only - don't laugh to hard  ).
<style type="text/css">
#tooltip {
color: #444;
font-size: 0.75em;
line-height: 1.5;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
background-color: #fff;
}
#tooltip p {
text-align: left;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
}
#tooltip a {
position: relative;
color: #444;
border-bottom: 1px dotted #666;
text-decoration: none;
cursor: help;
}
#tooltip a span {
display: none;
}
#tooltip a:hover {
font-size: 100%;
text-decoration: none;
} /* IE/Win requires some link change on hover in order to show the tooltips */
#tooltip a:hover span {
display: block !important;
position: absolute;
top: 5px;
left: 40px;
width: 160px;
border: 1px solid #7a052c;
background-color: #eee;
text-align: left;
color: #000;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.9em;
}
#tooltip p.test1 a {z-index: 1;}
#tooltip p.test2 a {z-index: 2;}
#tooltip p.test3 a {z-index: 3;}
</style>
</head>
<body>
<div id="tooltip">
<p class="test3"><a href="#">"topical anesthesia"<span>Superficial loss of sensation in the mucous membranes or the skin, produced by direct application of a local anesthetic.</span></a>
for clear cornea <a href="#">cataract<span>Abnormal clouding or opacities within the lens of the eye.</span></a> surgery as part of her cataract surgery technique.</p>
<p class="test2">he is a graduate of the X of X of Medicine, receiving the Citation for graduating in the top 10% of her medical school
class. Dr. X was initiated into the Medical Society while still in his medical school training in Kansas. During
the completion of her <a href="#">ophthalmology<span>The branch of medicine that deals with the anatomy, functions, pathology, and treatment of the eye.</span></a>
residency training in X, he was voted "The Most Outstanding Third-Year Resident" by his peers.</p></div>
</body>
_____________________________
Sally
| |
|
|
|
Nicole
Posts: 2843
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 18:55:28
Thanks Dan & Sally,
quote:
make a simple javascript function...
I'll see what I can do with that but I'm afraid those words seem a bit contradictory to me. "make", "simple", "javascript"....might need some help somewhere along the line with that.
Sally thanks for your response too. The problem I'm experiencing though is that each tooltip is displaying over the paragraph text (which is the desired effect), except if that paragraph text contains another tooltip. If that happens (and it does quite often within the same paragraph, even sentence) then the underlined text is still visible even when the previous tooltip is displayed. This is causing the tooltip text to appear on top of other text rendering it unreadable.
I notice you've in your test that you renamed the paragraphs and given them a unique z-index, but I'm not sure that will solve this problem as most often more than one tooltip can appear within the same paragraph. The obvious solution (to me at least), is to use different <span> tags for each tooltip, but wouldn't that make the html more cluttered or the CSS way too long?
Apologies if I've totally misunderstood.
Edit: In the image above, the tooltip showing is for the cut-off underlined word on the second line. Notice though that the initials FDA (which is another tooltip) encroaches within the tooltip box of another, and so does the tooltip text on the next line "topical anesthesia".
Nicole
_____________________________
| |
|
|
|
dpf
Posts: 7123
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 19:35:24
something like this in head section
function writeTip() {
document.write"here is the text and if it goes to more";
document.write"lines you continue on next line etc";
document.write"until you have the whole thing";
}
then where you want it, we call writeTip (and I have to look up how to do that - its been awhile)..lol
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7123
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 19:53:13
yes.... do you have that many that are repetitive and need to be in a js? if that many, better an external js file.
just use text editor and create them on top of each other
function functionName {
statement
statement
}
function secondFunctionName {
statements
}
etc. name the file
tooltips.js and link to it similar to a css
_____________________________
Dan
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: CSS Tooltip problem... - 3/14/2006 23:09:47
Dan, thanks for posting that 
Nicole, the below code, using your example, is working so far for IE and FF, and works with the JS in an external file.
I am stuck on how to handle <noscript> so have left that out. Am also wondering if calling in the text like this is worth it - probably is if it is being used over many pages in a large site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1252" />
<title>Tooltip Test</title>
<script type="text/javascript">
//<![CDATA[
tip = new Array
tip[1]="Superficial loss of sensation in the mucous membranes or the skin, produced by direct application of a local anesthetic."
tip[2]="Abnormal clouding or opacities within the lens of the eye."
tip[3]="The branch of medicine that deals with the anatomy, functions, pathology, and treatment of the eye."
tip[4]="and so on"
tip[5]="etc"
tip[6]="more"
tip[7]="etc etc"
tip[8]="Hello World"
tip[9]="Ipsum"
tip[10]="text here"
//]]>
</script>
<style type="text/css">
p.tooltip {
color: #444;
font-size: 0.75em;
line-height: 1.5;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
background-color: #fff;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
}
p.tooltip a {
position: relative;
color: #444;
border-bottom: 1px dotted #666;
text-decoration: none;
cursor: help;
}
p.tooltip a span {
display: none;
}
p.tooltip a:hover {
font-size: 100%;
text-decoration: none;
z-index: 3;
} /* IE/Win requires some link change on hover in order to show the tooltips */
a:hover span {
display: block !important;
position: absolute;
top: 5px;
left: 40px;
width: 160px;
border: 1px solid #7a052c;
background-color: #eee;
text-align: left;
color: #000;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.9em;
}
</style>
</head>
<body>
<p class="tooltip"><a href="#">"topical anesthesia"<span> <script type="text/javascript">document.write(tip[1])</script> </span></a>for clear cornea <a href="#">cataract<span> <script type="text/javascript">
document.write(tip[2])</script>
</span></a> <span> </span>surgery as part of her cataract surgery technique.</p>
<p class="tooltip">he is a graduate of the X of X of Medicine, receiving the Citation for graduating in the top 10% of her medical school
class. Dr. X was initiated into the Medical Society while still in his medical school training in Kansas. During
the completion of her <a href="#">ophthalmology<span> <script type="text/javascript">
document.write(tip[3])</script>
</span></a> <span> </span>residency training in X, he was voted "The Most Outstanding Third-Year Resident" by his peers.</p>
</body>
</html>
_____________________________
Sally
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
