CSS Tooltip problem... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> 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.

[image]local://upfiles/12879/E1CA82A939114E31BBEF8ED2AD08B7C8.jpg[/image]



dpf -> 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



rubyaim -> 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>





Nicole -> 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



rubyaim -> RE: CSS Tooltip problem... (3/14/2006 19:09:54)

Sorry Nicole, you have not misunderstood, I'm generally clear as mud and probably misunderstand you [:)] In my code both paragraphs could have been 'test3' class and worked - I didn't take the time to check it.

Moving the z-index will fix your issue, but I don't know enough about the z-index to know why or even if it is anywhere near the correct solution.

I moved it to the p.tooltip a:hover. 

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;
}




Nicole -> RE: CSS Tooltip problem... (3/14/2006 19:16:50)

Thanks Sally,

That fixed the problem exactly.

Now to the simple javascript......[sm=unsure.gif]

Nicole



rubyaim -> RE: CSS Tooltip problem... (3/14/2006 19:32:29)

I'll have to do the same [:)]

I was playing around with definition lists as well and hiding spans etc for the 'dt' but did not get very far, so switched back to tooltips.

Not that I know anything at all about SEO, but would it hurt to have your tip text tucked away elsewhere? There seems to be some good things in your text.




dpf -> 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



Nicole -> RE: CSS Tooltip problem... (3/14/2006 19:41:33)

So if I have 30 tips on one page and 200 across the whole site, could I just number them

function writeTip1() {
function writeTip2() {
function writeTip3() {
function writeTip4() {




dpf -> 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



rubyaim -> 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>





Nicole -> RE: CSS Tooltip problem... (3/14/2006 23:26:51)

Gee Whiz!

Thanks Dan and Sally, that's great.

The code will look much cleaner and possibly speed the page up a bit too.

Just another question though, I've saved what you've done Sally into it's own .js file, but how do I link to it in the head?

<script type="text/javascript" href="tooltips.js"></script>

That doesn't seem to be working, what am I leaving out?



rubyaim -> RE: CSS Tooltip problem... (3/14/2006 23:35:05)

Close, use 'src' rather than 'ahref'.

<script type="text/javascript" src="tooltips.js"></script>

And only this goes in that tooltips.js file. 

//<![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"
//]]>


Have fun [:)]

I think the <noscript> may be a problem but I've no more time to play today.

Edit: JS code amended to work [8|]



Nicole -> RE: CSS Tooltip problem... (3/15/2006 0:04:49)

Thanks again,

I really don't know why but I'm getting error messages all over the place. I've saved the .js as you suggested and corrected the href to src and put:

<script type="text/javascript">document.write(tip[1])</script>

where you've put it in the html and nothing,

expected "/" and 'tip' undefined.

I know nothing about .js okay, but it did seem simple enough. I think i'll have to do more reading on this subject.

Nicole



rubyaim -> RE: CSS Tooltip problem... (3/15/2006 0:17:59)

My error Nicole - there is an extra </script> in what I told you to save as the .js file - cut and paste never works [:@]

Try this in your .js file and I'll edit the above. 

//<![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"
//]]>


For testing I generally work in the root, so if you are not, maybe try that as well.

If you run into any more problems I'll email you the test html and js files.

I did try noscript, and this just under <body> works fine, but it's not very elegant. 

<noscript><p>You can view meanings of the words underlined at our <a href="glossary.html">Glossary Page</a> or something or other.</p></noscript>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625