By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

ToolTip not working in IE6

100+
P: 121
Hi,
I have been trying to make my tooltip work for IE6 but to no avail.

code is
Expand|Select|Wrap|Line Numbers
  1. <a class="info" href="#">
  2. <img src="http://bytes.com/submit/Images/urgentblank.gif" class="icon"/>
  3. <span>Data i need to show over hovered over link.</span>
  4. </a>
and CSS is
Expand|Select|Wrap|Line Numbers
  1. .icon
  2. {
  3.     background: url(../abc.gif);
  4.     height:25px;
  5.     width:25px;
  6. }
  7. a.info
  8. {
  9.     position:relative; /*this is the key*/
  10.     z-index:24;
  11.     color:#000000;
  12.     text-decoration:none
  13. }
  14.  
  15. a.info:hover
  16. {
  17.     z-index:25;
  18. }
  19.  
  20. a.info span
  21. {
  22.     display: none
  23. }
  24.  
  25. a.info:hover span
  26. {   /*the span will display just on :hover state*/
  27.     display:block;
  28.     position:absolute;
  29.     bottom:2em;
  30.     left:2em;
  31.     width:25em;
  32.     border:none;
  33.     background-color: #00517e;
  34.     color:#ffffff;
  35.     text-align: left;
  36.     padding: 3px 5px;
  37. }
Everything works fine IE7,IE8 and firefox but tooltip doesnt come in IE6.

Another question i have is what can i do so that when user clicks on <a> (this tooltip link), page dont do anything? right now, when user clicks on it. focus goes at top of page.(something like disabling click on <a> tag)

Thanks
Jay
Feb 11 '11 #1

✓ answered by jay123

Adding background-color to 'a.info span' class did the trick, God knows why :)

solution
Expand|Select|Wrap|Line Numbers
  1. a.info:hover
  2. {
  3.     z-index:25;
  4.     background-color:color-you-want;
  5. }
But still looking for solution for disabling anchor tag, so user remains at same place when he clicks on <a> tag.

Share this Question
Share on Google+
2 Replies


100+
P: 121
Adding background-color to 'a.info span' class did the trick, God knows why :)

solution
Expand|Select|Wrap|Line Numbers
  1. a.info:hover
  2. {
  3.     z-index:25;
  4.     background-color:color-you-want;
  5. }
But still looking for solution for disabling anchor tag, so user remains at same place when he clicks on <a> tag.
Feb 11 '11 #2

100+
P: 121
Changed <a> to <p>, sorted
Feb 11 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.