Solved

A title tag

Posted on 2001-06-04
22
175 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
  • 12
  • 5
  • 2
  • +3
22 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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
Comment Utility
Have a look at

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

for a popup tooltip example including code

Regards
GK
0
 

Author Comment

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

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hello Richard.  Did you forget this?

Cd&
0
 

Expert Comment

by:markg_23
Comment Utility
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
Comment Utility
behaviors are not support in ie 4. And the require is support for IE4+.  

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Oh and also requires user enabling.

Cd&
0
 

Expert Comment

by:ComTech
Comment Utility
The proposed answer will be accepted.  This question will be close.

Thank you,
ComTech
Community Support Moderator
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Thanks CT :^)

Cd&
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Convert a Master Page to HTML 16 59
CSS question related to hyperlinks 9 37
2 CSS questions 11 33
HTML page and JavaScript 2 48
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now