Solved

A title tag

Posted on 2001-06-04
22
180 Views
Last Modified: 2010-04-09
I am using <a title="MRN: 2614823   Visit#: 212011844   Age: 66Y    Badge#: 48375     Admit D/T: 3 Jun 01  1934"><big><big>BAKER-LODGE,</big></big><small><br>Badge#: 48375</br></small></a>

The problem with this is that the yellow tool tip "MRN: 2614823   Visit#: 212011844   Age: 66Y    Badge#: 48375     Admit D/T: 3 Jun 01  1934" disappears in 5 sec in IE 4.x or greater. My question is how can I make it stay there forever?
0
Comment
Question by:richardbe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 5
  • 2
  • +3
22 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6153290
You have to make it a layer with absolute positioning and visibility set to hidden.  Then on mouseOver you change the visibility.  The hard part is getting the positioning correct.

One question though.  If you want it to stay visibile forever, why would you not just make it the text of the link so it is always there? Putting the text in a yellow box like a tool tip is not difficult.

Cd&
0
 

Author Comment

by:richardbe
ID: 6153299
Because there is not enough room to display the text. It has to be a tool tip.

Are you saying there is no easy way to do this? With <a title> tags?

Can you explain this? Do you have sample code?
"You have to make it a layer with absolute positioning and visibility set to hidden.  Then on mouseOver
you change the visibility.  The hard part is getting the positioning correct."
0
 
LVL 5

Expert Comment

by:GeoffKell
ID: 6153334
Have a look at

http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm

for a popup tooltip example including code

Regards
GK
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:richardbe
ID: 6153380
Yeah but this is for a hyperlink not for straight text...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6153384
The tooltip goes in a div like this:

<div id="thediv" style="position:absolute;left:xxx;top:yyy;visibility:hidden;z-index:10">
the text of the tool tip
</div>

Then on the anchor:

<a href="blah" onMouseover="makevisible('thediv')">

And the make visibile function looks like this:

<script language="JavaScript">
<!--
   function makevisibile(EL)
   {
      if (document.all) document.all[EL].style.visibility="visible"
      else if (document.layers) document.layers[EL].visibility="visible"
      else if (document.getElementById) document.getElementById(EL).style.visibility="visible";
   }
//-->
</script>


The part that we don't have here is what the value of xxx and yyy are
and that determines the position on the screen of the displayed tooltip.

Cd&


     
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6153418
It has to be on a link if you want it to work in Netscape 4.x  If you don't
need to support NS then we have more options.

Cd&
0
 

Author Comment

by:richardbe
ID: 6153457
I don't need to support NS. I need the simplest way to make it work in IE 4.x or greater.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6153566
Okay drop this in your browser and see how close it is to what you want:


<html><head>
</head><body>
<a onMouseover="document.all['thediv'].style.visibility='visible'">
<big><big>BAKER-LODGE,</big></big><small><br>Badge#: 48375</br></small>
</a>
<div id="thediv" style="background-color:lightyellow;color:black;
border:1px solid black;visibility:hidden;width:175">
MRN: 2614823 Visit#: 212011844 Age: 66Y Badge#: 48375 Admit D/T: 3 Jun 01 1934
</div>
</body>
</html>



Cd&
0
 

Author Comment

by:richardbe
ID: 6153788
NO it has to be a tool tip, it should not affect the formatting of any of the existing text.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6154092
It CAN'T be a tooltip and work the way you want. Either it doesn't time out and it's not a tooltip, or it's a tooltip and times out. There's no other option.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6154096
And if there's not enough room to display it, why does it have to be there forever? If it's there, there's enough room. If it's not, then it goes away.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6154129
Richard you have me confused.  You want it to look like a tooltip, but you don't want it to act like a tooltip by timing out, and now you are saying it needs to be a tool tip. What formatting is it affecting? Is it the positioning that is a problem or you want it to float with the cursor like a tt?

What am I failing to understand?  I think what you want can be done, but I need to understand what you expect it to look like.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6154257
Okay, you're not talking to me anymore, probably in a timezone where the day
is over, so I'll take a guess and see if this gets it closer and check back
in the morning.

<html>
<head>
<script language="JavaScript">
<!--
   var CURREL=false;
   function dragEvnt()
   {
      if (CURREL)
      {
         var WIN=window.event;
         CURREL.style.top=WIN.y+10;
         CURREL.style.left=WIN.x+10;
      }
   }

   function tipUP(EL)
   {
      CURREL=document.all[EL];
      CURREL.style.visibility="visible";
   }

   function tipDN()
   {
      CURREL.style.visibility="hidden";
      CURREL=false;
   }
//-->
</script>

</head>
<BODY onMouseMove="dragEvnt()">
<a onMouseover="tipUP('thediv')" onMouseout="tipDN()">
<big><big>BAKER-LODGE,</big></big><small><br>Badge#: 48375</br></small>
</a>
<div id="thediv" style="background-color:lightyellow;color:black;
border:1px solid black;visibility:hidden;width:175;z-index:10;position:absolute">
MRN: 2614823 Visit#: 212011844 Age: 66Y Badge#: 48375 Admit D/T: 3 Jun 01 1934
</div>
</body>
</html>

Cd&

0
 

Author Comment

by:richardbe
ID: 6157915
Perfect!!! It works. Thank you very much. YOu've solved my problem. IT's always nice to have a technical expert when you need one.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 6157936
Okay that's great. I'll make that an answer, then.  If you need more help, I'm this forum most days.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6173444
richard,

It looks like you forgot to grade this.  It can't get moved to the database until you accept an answer and grade it.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6242935
Hello Richard.  Did you forget this?

Cd&
0
 

Expert Comment

by:markg_23
ID: 6259141
The easy way to maintain a tool tip display forever o the time you desire is:

<elsement STYLE="behavior:url('tooltip.htc')" ID=sID DURATION=(Time in miliseconds)>

if you specify -1 as DURATION the tooltip will stay forever
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6259362
behaviors are not support in ie 4. And the require is support for IE4+.  

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6259371
Oh and also requires user enabling.

Cd&
0
 

Expert Comment

by:ComTech
ID: 6279365
The proposed answer will be accepted.  This question will be close.

Thank you,
ComTech
Community Support Moderator
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6280407
Thanks CT :^)

Cd&
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question